Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                @mixin _select-form-reset() {
  display: block;
  padding: 0;
  position: relative;

  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none; // Arrow clickable in some browsers
    z-index: 2;
  }

  // This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper
  select {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 1px solid transparent;
    font-size: 16px; // Font size must the 16px or larger to prevent iOS page zoom on focus
    outline: none;

    /* Focus style */
    &:focus {
      background-color: transparent;
      outline: none;
    }
  }

  /* Set options to normal weight */
  option {
    font-weight: normal;
  }

  /* ------------------------------------  */
  /* START OF UGLY BROWSER-SPECIFIC HACKS */
  /* ----------------------------------  */

  // Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7
  x:-o-prefocus, &::after {
    display: none;
  }
  // IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance,
  // IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting
  // The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    & {
      select {
        &::-ms-expand {
          display: none;
        }

        &:focus::-ms-value {
          background: transparent;
          color: #000;
        }

      }
    }
  }

  /* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container.
     The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex.
     You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
  /* Show only the native arrow */
  @-moz-document url-prefix() {
    & {
      overflow: hidden;

      select {
        width: 120%;
        width: -moz-calc(100% + 3em);
        width: calc(100% + 3em);
        
        @supports(-moz-appearance: none) {
          width: 100%;          
        }
        

        /* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
        &:-moz-focusring {
          color: transparent;
          text-shadow: 0 0 0 #000;
        }
      }
    }
  }
  
  @supports( -moz-appearance: none ) {
    & {
      width: 100%;          
    }
  }

}

              
            
!

JS

              
                // this resets a select box with hacks so you can style the drop down etc
// without doing horrible js reimplementation
              
            
!
999px

Console