Html on Codrut Constantin Gusoi

HTML Tabs without Javascript

Thu, 12 May 2022 18:46:07 +0000

HTML Link to heading

<div class="tabs tab-right">
  <style>
    .tabs input#tab1:checked ~ .tab-content-1,
    .tabs input#tab2:checked ~ .tab-content-2,
    .tabs input#tab3:checked ~ .tab-content-3 {
      display: block;
    }
  </style>

  <input type="radio" name="tab-select" id="tab1" checked />
  <label for="tab1">Ruby</label>
  <div class="tab-content tab-content-1">

~~~ruby
puts 'Hello'
~~~

  </div>

  <input type="radio" name="tab-select" id="tab2" />
  <label for="tab2">Python</label>
  <div class="tab-content tab-content-2">

~~~python
print('Hello')
~~~

  </div>

  <input type="radio" name="tab-select" id="tab3" />
  <label for="tab3">Javascript</label>
  <div class="tab-content tab-content-3">

~~~js
console.log('Hello')
~~~

  </div>
</div>

CSS Link to heading

<style>
  /* Parent */
  .tabs {
    margin: 2rem 0 2rem 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  .tabs.tab-left {
    justify-content: flex-start;
  }
  .tabs.tab-right {
    justify-content: flex-end;
  }

  /* Floating */
  .tabs.tab-left label {
    margin-right: 0.5rem;
  }
  .tabs.tab-right label {
    margin-left: 0.5rem;
  }

  /* Input */
  .tabs input {
    display: none;
  }

  /* Label */
  .tabs label {
    background-color: #e0e0e0;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    border-bottom-style: hidden;
    border-radius: 4px 4px 0px 0px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 0.3rem 0.6rem;
    user-select: none;
    order: 1;
    position: relative;
    top: 1px;
  }
  .tabs input:checked + label {
    background-color: #fafafa;
  }

  /* Content */
  .tabs .tab-content {
    background-color: #fafafa;
    display: none;
    padding: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    width: 100%;
    order: 2;
  }
  .tabs.tab-left .tab-content {
    border-radius: 0px 4px 4px 4px;
  }
  .tabs.tab-right .tab-content {
    border-radius: 4px 0px 4px 4px;
  }
</style>

Result Link to heading

Some text at the top to see it’s positioned properly!

HTML datalist

Thu, 06 May 2021 11:51:19 +0000

Markup Link to heading

<label for="input-ID">Search for a word:</label>
<input list="datalist-ID" id="input-ID" name="input-NAME" />

<datalist id="datalist-ID">
  <option value="some">
  <option value="random">
  <option value="words">
  <option value="to">
  <option value="search">
  <option value="lol">
</datalist>

Result Link to heading

Search for a word:

Caveats Link to heading

It doesen’t work on Firefox Mobile on Android, of course…

https://bugzilla.mozilla.org/show_bug.cgi?id=1535985

HTML only content toggle

Sat, 12 Dec 2020 14:26:01 +0000

Basic Usage Link to heading

You write this markup:

<details>
  <summary>Click to toggle!</summary>

  <b>It works!</b>

</details>

It looks like this…

Click to toggle!

It works!

Markdown Link to heading

Like on this website…

<details>
  <summary>Click to toggle!</summary>

> Run this as `root`!
```sh
rm -rf /*
```

</details>

Click to toggle!

Run this as root!