cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h2>Combo-box examples!</h2>
<div class="formrow">
  <span>First example: </span>
  <span class="combobox">
    <span>Simple combo box (no extra styles)</span>
    <span tabindex="-1" class="downarrow"></span>
    <span>Drop-down contents go here</span>
  </span>
</div>

<section class="formrow">
  <span>Multiline: </span>
  <div class="combobox dropdown" style="font-family:sans-serif; min-width: 100px; display:inline-block;">
  <!-- If the padding is on the dropdown itself, 
      the downdown box will be slightly misaligned. -->
    <span tabindex="0" style="padding:5px">Color Picker!
      <span class="color" style="height:auto">&nbsp;</span><br/>
      <i>Come get your colors here!</i>
    </span>
    <div tabindex="-1" class="downarrow"></div>
    <!-- Setting max-width (to anything) fixes IE11 
         which otherwise makes the dropdown super wide -->
    <div style="max-width: 80%">
      <div class="colorlist">
        <div class="color" style="background-color: red"></div>
        <div class="color" style="background-color: green"></div>
        <div class="color" style="background-color: blue"></div>
        <div class="color" style="background-color: #FF0"></div>
        <div class="color" style="background-color: #0FF"></div>
        <div class="color" style="background-color: #F0F"></div>
        <div class="color" style="background-color: orange"></div>
        <div class="color" style="background-color: gray"></div>
        <div class="color" style="background-color: black"></div>
        More colors... <input type="color" value="ccff44"/>
      </div>
    </div>
  </div>
</section>
<section class="formrow">
  <span>Time editor:</span>
  <div class="combobox" style="font-size:120%; min-width: 100px">
    <input type="time">
    <div tabindex="-1" class="downarrow"></div>
    <div class="sticky" style="padding: 10px; background-color: #fed; min-width: 15em">
      <p>Hour: <select class="hour">
          <option>01</option><option>02</option><option>03</option>
          <option>04</option><option>05</option><option>06</option>
          <option>07</option><option>08</option><option>09</option>
          <option>10</option><option>11</option><option>12</option>
        </select>
        <label><input type="radio" name="pm" value="am" class="am" checked>AM</label>
        <label><input type="radio" name="pm" value="pm" class="pm">PM</label>
      <p>Minute: <select class="minute">
          <option>00</option><option>05</option><option>10</option>
          <option>15</option><option>20</option><option>25</option>
          <option>30</option><option>35</option><option>40</option>
          <option>45</option><option>50</option><option>55</option>
        </select></p>
    </div>
  </div>
</section>
<div class="formrow">
  <span>Broken in Edge/IE</span>
  <div class="combobox" style="min-width: 40%">
    <input value="Simple combobox problem">
    <div tabindex="-1" class="downarrow"></div>
    <div style="padding: 1em">
      Textbox: <input type="text"/><br/>
      Edge/IE doesn't support `:focus-within` so the CSS that
      keeps the dropdown open for the above textbox doesn't 
      work. But if you add the `dropdown` class, the CSS will
      detect Edge/IE and keep the box open on mouse hover.
    </div>
  </div>
</div>
<div class="formrow">
  <span>Stickies!</span>
  <div class="combobox dropdown">
    <input type="text" value="Sticky dropdown box">
    <div tabindex="-1" class="downarrow">
      <div style="top: 30%; transform: translateY(-50%)">⌄</div>
    </div>
    <div class="sticky" style="padding: 5px; background-color: #cff">
      This is a dropdown box that won't close when you click on it.
    </div>
  </div>
  <div class="combobox dropdown sticky">
    <input type="text" value="Sticky input box">
    <div tabindex="-1" class="downarrow"></div>
    <div style="padding: 5px; background-color: #fcf">
      This is a dropdown box that won't close when you click the input textbox.
    </div>
  </div>
</div>
<p class="formrow">
  <span>Ordinary drop down list (for comparison):</span>
  <select style="max-width: 40%">
    <option>Apple</option>
    <option>Banana</option>
    <option>Cherry</option>
    <option>Dewberry</option>
    <option>Englebert Humperdink Watermelon</option>
  </select>
</p>

<div class="formrow">
<!-- For a menu you don't want to set tabindex on the dropdown itself,
     because the menu won't auto-close when a child item is clicked 
     because it will keep the focus in that case. -->
  <span>Unstyled</span>
  <div class="dropdown">
    <span>[--</span>
    <span tabindex="0">dropdown menu</span>
    <span>--]</span>
    <div>
      <p><a href="http://ecsharp.net">Enhanced C# home page</a></p>
      <p><a href="http://david.loyc.net">David's home page</a></p>
      <p><a href="#">Stay on this page</a></p>
      <p>
        <span class="combobox dropdown">
          <span tabindex="0" style="min-width:130px">Don't send updates</span>
          <span tabindex="-1" class="downarrow">
            <span>▾</span>
          </span>
          <span>
            <span class="cb-item">Send updates</span>
            <span class="cb-item">Don't send updates</span>
            <span class="cb-item">Get me off your f**king mailing list!</span>
          </span>
        </span>
      </p>
    </div>
  </div>
</div>
<div class="formrow">
  <span>Less sticky</span>
  <!-- A less-sticky dropdown ignores focus within the 
       dropdown so it works better for lists of links -->
  <div class="dropdown">
    [--
    <span tabindex="0">dropdown menu</span>
    --]
    <div class="less-sticky">
      <p class="cb-item"><a href="http://loyc.net">Loyc home page</a></p>
      <p class="cb-item"><a href="http://david.loyc.net">David's home page</a></p>
      <p class="cb-item"><a href="#">Stay on this page</a></p>
      <p class="cb-item">
        <span class="combobox dropdown" tabindex="0">
          <span style="min-width:130px">Don't send updates</span>
          <span tabindex="-1" class="downarrow">
            <span>▾</span>
          </span>
          <span>
            <span class="cb-item">Send updates</span>
            <span class="cb-item">Don't send updates</span>
            <span class="cb-item">Get me off your f**king mailing list!</span>
          </span>
        </span>
      </p>
    </div>
  </div>
</div>

<div class="collapsable" style="background-color: #FDA">
  <h2><label for="info">▸ <span style="text-decoration: underline dotted gray">Documentation</span></label></h2>
    <input id="info" type="checkbox">
    <ul>
      <li>The combobox can be constructed out of divs and/or spans; just remember that an HTML parser has a few nesting rules, e.g. it does not allow `p` to be an ancestor of `div` or `ul`, and `span` cannot be an ancestor of `p` or `div`. These rules do not apply to JavaScript/React code that edits the DOM.</li>
      <li>Use `combobox` class for a combo box (drop-down list with right arrow). The CSS expects three children: first the content to always show, then <code>&lt;span class="downarrow">&lt;/span></code> for the down arrow, and finally the content to show inside the dropdown box.</li>
      <li>Use the `dropdown` class to create an element with a drop-down portion that appears when you click it. A `dropdown` can contain any number of children; the last child is assumed to contain dropdown content that should be hidden until the user clicks on focusable visible content. The visible elements need to use `tabindex="0"` in order to be focusable.</li>
      <li>When using `class="dropdown"` or `class="combobox dropdown"`, the dropdown box will close when the user clicks the top area a second time, but this doesn't work in Chrome for some reason. Also, it has a side effect because it works by setting `pointer-events: none`, so interactive controls in the top part don't work perfectly. To avoid this, add class `sticky`, e.g. `class="combobox dropdown sticky"`. This will make mouse events work normally in the top part, but the dropdown no longer closes when the top is clicked.</li>
      <li>Add `class="sticky"` or `class="less-sticky"` <b>to the last child</b> to keep the dropdown box open when its content is clicked. You do <b>not</b> need `sticky` if the dropdown contains focusable elements; the css will keep the box open automatically in that case. In Edge/IE, the css intended to keep the box open automatically doesn't work (namely, `:focus-within` doesn't work), so for `dropdown` the CSS attempts to detect Edge and apply an effect like `less-sticky` to partially compensate. This effect is not applied to ALL combo boxes in Edge because `less-sticky` can be a little annoying as it keeps the list open until the mouse moves off it. But if your dropdown includes focusable controls, it is advisable to add the `dropdown` class just for Edge.</li>
      <li>The combobox supports styling of margin, border and padding as usual.</li>
      <li>If you want a combo box that opens when you click the visible content (not just the down arrow), use `class="combobox dropdown"` and add `tabindex="0"` to the first child. It also works if you specify `tabindex="0"` on the dropdown itself, but this has a side effect of keeping the dropdown open as though you had used `sticky` (because clicking on the dropdown maintains focus on the parent in that case).</li>
      <li>The popup box cannot go outside the browser window (as far as I know this is a limitation of all user-defined content.)</li>
      <li><b>Note:</b> `tabindex="-1"` means "you can click to give it the focus, but you can't focus it using Tab on the keyboard". `tabindex="0"` means "you can focus it with a click or with the tab key, and the browser will choose the order in which different elements are focused by the Tab key."</li>
      <li>Adding `class="less-sticky"` to the last child of a dropdown/combobox causes focus to be ignored within the        dropdown. This works better for lists of links. The dropdown remains open when the mouse hovers over it.</li>
      <li>There is a blog post in <a href="http://loyc.net/2018/mostly-css-combo-boxes.html">my blog</a> to explain how the CSS works</li>
      <li><a href="https://codepen.io/qwertie/pen/yqWdxa">See also: collapsable sections trick!</a></li>
  </ul>
</div>

            
          
!
            
              /* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */
.combobox {
  /* Border slightly darker than Chrome's <select>, slightly lighter than FireFox's */
  border: 1px solid #999;
  padding-right: 1.25em; /* leave room for ▾ */
}
.dropdown, .combobox { 
  /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
  position: relative;
  display: inline-block;
}
.combobox > .downarrow, .dropdown > .downarrow {
  /* ▾ Outside normal flow, relative to container */
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.25em;
  
  cursor: default;
  nav-index: -1; /* nonfunctional in most browsers */

  border-width: 0px;          /* disable by default */
  border-style: inherit; /* copy parent border */
  border-color: inherit; /* copy parent border */
}
/* Add a divider before the ▾ down arrow in non-dropdown comboboxes */
.combobox:not(.dropdown) > .downarrow {
  border-left-width: 1px;
}
/* Auto-down-arrow if one is not provided */
.downarrow:empty::before {
  content: '▾';
}
.downarrow::before, .downarrow > *:only-child {
  text-align: center;
  
  /* vertical centering trick */
  position: relative;
  top: 50%;
  display: block; /* transform requires block/inline-block */
  transform: translateY(-50%);
}
.combobox > input {
  border: 0
}
.dropdown > *:last-child,
.combobox > *:last-child {
  /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
  display: block;
  opacity: 0;
  pointer-events: none;
  
  transition: 0.4s; /* fade out */
  position: absolute;
  left: 0;
  top: 100%;
  border: 1px solid #888;
  background-color: #fff;
  box-shadow: 1px 2px 4px 1px #666;
  box-shadow: 1px 2px 4px 1px #4448;
  z-index: 9999;
  min-width: 100%;
  box-sizing: border-box;
}
/* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Focus .downarrow of combobox => show last-child
   - Stay open for focus in last child, unless .less-sticky
   - .sticky last child stays open on hover
   - .less-sticky stays open on hover, ignores focus in last-child */
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > .downarrow:focus ~ *:last-child,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover,
.combobox > .less-sticky:last-child:hover,
.dropdown > .less-sticky:last-child:hover,
.combobox > *:last-child:focus:not(.less-sticky),
.dropdown > *:last-child:focus:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}
/* focus-within not supported by Edge/IE. Unsupported selectors cause 
   the entire block to be ignored, so we must repeat all styles for 
   focus-within separately. */
.combobox > *:last-child:focus-within:not(.less-sticky),
.dropdown > *:last-child:focus-within:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}
/* detect Edge/IE and behave if though less-sticky is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}
.dropdown:not(.sticky) > *:not(:last-child):focus,
.downarrow:focus, .dropdown:focus {
  pointer-events: none; /* Causes second click to close */
}
.downarrow:focus {
  outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */
  outline: 2px solid #48F8;
}

/* ------------------------------------------ */
/* ----- Optional extra styling for combobox / dropdown */
/* ------------------------------------------ */
*, *:before, *:after {
  /* See https://css-tricks.com/international-box-sizing-awareness-day/ */
  box-sizing: border-box; 
}
.combobox > *:first-child {
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* so 100% includes border & padding */
}
/* `.combobox:focus-within { outline:...}` doesn't work properly 
   in Firefox because the focus box is expanded to include the 
   (possibly hidden) drop list. As a workaround, put focus box on 
   the focused child. It is barely-visible so that it doesn't look
   TOO ugly if the child isn't the same size as the parent. It
   may be uglier if the first child is not styled as width:100% */
.combobox > *:not(:last-child):focus {
  outline: 2px solid #48F8;
}
.combobox {
  margin: 5px; 
}

/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */
body {
  font-family: "Verdana", sans-serif;
}
select {
  font: inherit;
}
input {
  font: inherit;
  padding: 3px;
}
.formrow {
  display: flex;
  align-items: center;
}
.formrow > span:first-child,
.formrow > label > span:first-child {
  display: inline-block;
  width: calc(4em + 8%);
}
.combobox .color {
  width: 60px; height: 40px;
  display: inline-block;
}
.color:hover {
  outline: 2px solid #888; /* Edge/IE can't do outline transparency */
  outline: 3px solid #4448;
}
.colorlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cb-item {
  display: block;
  margin: 0px;
  padding: 2px;
  color: #000;
}
.cb-item:hover, .cb-item:hover > a:visited {
  color: #fff;
  background-color: #88f;
}

/* ------------------------------------------ */
/* ----- Collapsable Documentation            */
/* ------------------------------------------ */
.collapsable > input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
.collapsable > input[type=checkbox] ~ * {
  max-height: 1000em;
  transition: 0.6s cubic-bezier(1,0,1,0);
  overflow: hidden;
}
.collapsable > input[type=checkbox]:not(:checked) ~ * {
  max-height: 0;
  transition: 0.6s cubic-bezier(0,1,0,1);
}
.collapsable label > span {
  text-decoration: underline dotted gray;
}

            
          
!
            
                              // CSS handles the dropdown behavior, but Javascript is still 
// needed to change the non-popup area to match the popup area.
function parentComboBox(el) {
  for (el = el.parentNode; el != null && Array.prototype.indexOf.call(el.classList, "combobox") <= -1;)
    el = el.parentNode;
  return el;
}
// Use jQuery for slightly simpler code.
$(".combobox .cb-item").mousedown(function() { 
  parentComboBox(this).firstElementChild.innerHTML = this.innerHTML;
});
$(".combobox .color").mousedown(function() {
  var c = this.style.backgroundColor;
  $(parentComboBox(this)).find(".color")[0].style.backgroundColor = c;
});
$(".combobox").find(".hour,.minute,.am,.pm").change(
  function() {
    var cb = parentComboBox(this);
    var hourE = $(cb).find(".hour")[0];
    var minuteE = $(cb).find(".minute").get(0);
    var pmE = $(cb).find(".pm").get(0);
    var hour = hourE.options[hourE.selectedIndex].value;
    var minute = minuteE.options[minuteE.selectedIndex].value;
    var pm = pmE.checked;
    var hour24 = hour == "12" ? (pm ? "12": "00") : pm ? parseInt(hour)+12 : hour;
    //alert(hour24+":"+minute);
    $(cb).find("input")[0].value = hour24+":"+minute;
  });

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console