mozilla
Your Search Results

    Example 1

    This is the first example of code that explains how to build a custom form widget.

    Basic state

    HTML

    <div class="select">
      <span class="value">Cherry</span>
      <ul class="optList hidden">
        <li class="option">Cherry</li>
        <li class="option">Lemon</li>
        <li class="option">Banana</li>
        <li class="option">Strawberry</li>
        <li class="option">Apple</li>
      </ul>
    </div>

    CSS

    /* --------------- */
    /* Required Styles */
    /* --------------- */
    
    .select {
      position: relative;
      display : inline-block;
    }
    
    .select.active,
    .select:focus {
      box-shadow: 0 0 3px 1px #227755;
      outline: none;
    }
    
    .select .optList {
      position: absolute;
      top     : 100%;
      left    : 0;
    }
    
    .select .optList.hidden {
      max-height: 0;
      visibility: hidden;
    }
    
    /* ------------ */
    /* Fancy Styles */
    /* ------------ */
    
    .select {
      font-size   : 0.625em; /* 10px */
      font-family : Verdana, Arial, sans-serif;
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
      width   : 10em; /* 100px */
    
      border        : 0.2em solid #000; /* 2px */
      border-radius : 0.4em; /* 4px */
    
      box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
    
      background : #F0F0F0;
      background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
      background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
    }
    
    .select .value {
      display  : inline-block;
      width    : 100%;
      overflow : hidden;
    
      white-space   : nowrap;
      text-overflow : ellipsis;
      vertical-align: top;
    }
    
    .select:after {
      content : "▼";
      position: absolute;
      z-index : 1;
      height  : 100%;
      width   : 2em; /* 20px */
      top     : 0;
      right   : 0;
    
      padding-top : .1em;
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      text-align : center;
    
      border-left  : .2em solid #000;
      border-radius: 0 .1em .1em 0;
    
      background-color : #000;
      color : #FFF;
    }
    
    .select .optList {
      z-index : 2;
    
      list-style: none;
      margin : 0;
      padding: 0;
    
      background: #f0f0f0;
      border: .2em solid #000;
      border-top-width : .1em;
      border-radius: 0 0 .4em .4em;
    
      box-shadow: 0 .2em .4em rgba(0,0,0,.4);
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      min-width : 100%;
      max-height: 10em; /* 100px */
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .select .option {
      padding: .2em .3em;
    }
    
    .select .highlight {
      background: #000;
      color: #FFFFFF;
    }
    

    Result for basic state

    Active state

    HTML

    <div class="select active">
      <span class="value">Cherry</span>
      <ul class="optList hidden">
        <li class="option">Cherry</li>
        <li class="option">Lemon</li>
        <li class="option">Banana</li>
        <li class="option">Strawberry</li>
        <li class="option">Apple</li>
      </ul>
    </div>

    CSS

    /* --------------- */
    /* Required Styles */
    /* --------------- */
    
    .select {
      position: relative;
      display : inline-block;
    }
    
    .select.active,
    .select:focus {
      box-shadow: 0 0 3px 1px #227755;
      outline: none;
    }
    
    .select .optList {
      position: absolute;
      top     : 100%;
      left    : 0;
    }
    
    .select .optList.hidden {
      max-height: 0;
      visibility: hidden;
    }
    
    /* ------------ */
    /* Fancy Styles */
    /* ------------ */
    
    .select {
      font-size   : 0.625em; /* 10px */
      font-family : Verdana, Arial, sans-serif;
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
      width   : 10em; /* 100px */
    
      border        : 0.2em solid #000; /* 2px */
      border-radius : 0.4em; /* 4px */
    
      box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
    
      background : #F0F0F0;
      background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
      background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
    }
    
    .select .value {
      display  : inline-block;
      width    : 100%;
      overflow : hidden;
    
      white-space   : nowrap;
      text-overflow : ellipsis;
      vertical-align: top;
    }
    
    .select:after {
      content : "▼";
      position: absolute;
      z-index : 1;
      height  : 100%;
      width   : 2em; /* 20px */
      top     : 0;
      right   : 0;
    
      padding-top : .1em;
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      text-align : center;
    
      border-left  : .2em solid #000;
      border-radius: 0 .1em .1em 0;
    
      background-color : #000;
      color : #FFF;
    }
    
    .select .optList {
      z-index : 2;
    
      list-style: none;
      margin : 0;
      padding: 0;
    
      background: #f0f0f0;
      border: .2em solid #000;
      border-top-width : .1em;
      border-radius: 0 0 .4em .4em;
    
      box-shadow: 0 .2em .4em rgba(0,0,0,.4);
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      min-width : 100%;
      max-height: 10em; /* 100px */
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .select .option {
      padding: .2em .3em;
    }
    
    .select .highlight {
      background: #000;
      color: #FFFFFF;
    }

    Result for active state

    Open state

    HTML

    <div class="select active">
      <span class="value">Cherry</span>
      <ul class="optList">
        <li class="option highlight">Cherry</li>
        <li class="option">Lemon</li>
        <li class="option">Banana</li>
        <li class="option">Strawberry</li>
        <li class="option">Apple</li>
      </ul>
    </div>

    CSS

    /* --------------- */
    /* Required Styles */
    /* --------------- */
    
    .select {
      position: relative;
      display : inline-block;
    }
    
    .select.active,
    .select:focus {
      box-shadow: 0 0 3px 1px #227755;
      outline: none;
    }
    
    .select .optList {
      position: absolute;
      top     : 100%;
      left    : 0;
    }
    
    .select .optList.hidden {
      max-height: 0;
      visibility: hidden;
    }
    
    /* ------------ */
    /* Fancy Styles */
    /* ------------ */
    
    .select {
      font-size   : 0.625em; /* 10px */
      font-family : Verdana, Arial, sans-serif;
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
      width   : 10em; /* 100px */
    
      border        : 0.2em solid #000; /* 2px */
      border-radius : 0.4em; /* 4px */
    
      box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
    
      background : #F0F0F0;
      background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
      background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
    }
    
    .select .value {
      display  : inline-block;
      width    : 100%;
      overflow : hidden;
    
      white-space   : nowrap;
      text-overflow : ellipsis;
      vertical-align: top;
    }
    
    .select:after {
      content : "▼";
      position: absolute;
      z-index : 1;
      height  : 100%;
      width   : 2em; /* 20px */
      top     : 0;
      right   : 0;
    
      padding-top : .1em;
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      text-align : center;
    
      border-left  : .2em solid #000;
      border-radius: 0 .1em .1em 0;
    
      background-color : #000;
      color : #FFF;
    }
    
    .select .optList {
      z-index : 2;
    
      list-style: none;
      margin : 0;
      padding: 0;
    
      background: #f0f0f0;
      border: .2em solid #000;
      border-top-width : .1em;
      border-radius: 0 0 .4em .4em;
    
      box-shadow: 0 .2em .4em rgba(0,0,0,.4);
    
      -moz-box-sizing : border-box;
      box-sizing : border-box;
    
      min-width : 100%;
      max-height: 10em; /* 100px */
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .select .option {
      padding: .2em .3em;
    }
    
    .select .highlight {
      background: #000;
      color: #FFF;
    }

    Result for open state

    Document Tags and Contributors

    Tags: 
    Contributors to this page: Sheppy, ethertank, kscarfone, Jeremie
    Last updated by: kscarfone,