Pure CSS Semantic UI Dropdown

CSS only toggle Semantic UI dropdown. No JavaScript required. The behavior of dropdown here is almost the same as simple dropdown in official doc, which also requires no JavaScript. The difference is that simple dropdown opens when mouse hovers over, and dropdown here opens when mouse clicks. The dropdown here is modified from compact dropdown in official doc.

Click the following Dropdown text to see the demo of pure css toggle.

We will apply the technique of Pure CSS Toggle HTML Element [1] here. We need:

1 - Visible HTML label elements, which is the dropdown-trigger, and is

the text Dropdown in our example.

2 - Invisible HTML input checkbox elements, referenced by the label elements via for attribute.

3 - dropdown-menu, which is to be toggled and invisible in the beginning.

When users click on the visible label elements, the corresponding input checkbox element is checked. We use CSS3 :checked selector to select corresponding dropdown menu and make it visible.

The complete source code is as follows:

HTML:

<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.css">

<div class="ui compact selection dropdown">
  <i class="dropdown icon"></i>
  <label class="text" for="dropdown-toggle">Dropdown</label>
  <input id="dropdown-toggle" type="checkbox" />
  <div class="menu">
    <div class="item">Choice 1</div>
    <div class="item">Choice 2</div>
    <div class="item">Choice 3</div>
  </div>
</div>

CSS:

#dropdown-toggle {
  display: none;
}

#dropdown-toggle:checked ~ div.menu {
  display: block;
}

• The first rule hides the input checkbox.
• The magic is in second rule. We use :checked and general sibling selector (~) to make the dropdown menu visible.

Tested on:

• Semantic UI 2.4.0
• Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)

References: