Natural language search styled select menus

index.html

<!--[if IE ]>
<div class="ie">
<![endif]-->
<!--[if !IE]>-->
<div>
<!--<![endif]-->
  <div class="search-panel open">
    <div class="left">
      <div class="question">
        <span class="text">I’m interested in conversations about</span>
        <span class="select">
          <select name="forum$ctl01$FirstDropDown" id="forum_ctl01_FirstDropDown">
            <option value="diagnosis">life</option>
            <option value="treatment">love</option>
            <option value="living-with-cancer">macdonalds</option>
          </select>
        </span>
        <span class="text">and I want to talk about</span>
        <span class="select">
          <select name="forum$ctl01$SecondDropDown" id="forum_ctl01_SecondDropDown">
            <option value="treatment options" class="diagnosis">treatment options</option>
            <option value="advice" class="diagnosis">advice</option>
            <option value="side effects" class="diagnosis">side effects</option>
            <option value="radio therapy" class="treatment">radio therapy</option>
            <option value="hormone therapy" class="treatment">hormone therapy</option>
            <option value="sex life" class="living-with-cancer">sex life</option>
            <option value="diet" class="living-with-cancer">diet</option>
          </select>
        </span>
      </div>
      <div class="submit">
        <input type="submit" name="forum$ctl01$Button1" value="Find a conversation" id="forum_ctl01_Button1">
      </div>
    </div>
  </div>
</div>

natural-language-search-styled-select-menus.markdown

Natural language search styled select menus

Styling select menu's to look like regular text, in a 'natural language' style search.

All select styling removed in...

Mac: Chrome, Firefox, Safari, Opera PC: Chrome, Firefox, IE10

Browser default arrows showing in...

PC: IE9, IE8

A Pen by mike lange on CodePen.

License.

style.scss

@import "compass/css3";

//Greys
$color-grey-original:                   #979797;

$color-grey-75-white:                   #E6E6E5;
$color-grey-50-white:                   #D4D4D3;
$color-grey-25-white:                   #CACACA;

$color-grey-25-black:                   #656565;
$color-grey-50-black:                   #333333;
$color-grey-75-black:                   #1E1E1E;

//Greens
$color-green-original:                  #19AC40;

$color-green-75-white:                  #C5EACF;
$color-green-50-white:                  #8CD6A0;
$color-green-25-white:                  #53C170;

$color-green-25-black:                  #138130;
$color-green-50-black:                  #0C5620;
$color-green-75-black:                  #062B10;

$color-green-bright:                    #8EE183;

//Blues
$color-blue-original:                   #1391C9;

$color-blue-75-white:                   #B9D8E5;
$color-blue-50-white:                   #82C1DC;
$color-blue-25-white:                   #4AA9D2;

$color-blue-25-black:                   #036D97;
$color-blue-50-black:                   #094864;
$color-blue-75-black:                   #052432;

$color-blue-bright:                     #45BAF9;

@mixin font-size($font-size: 14) {
    font-size:$font-size + px;
    font-size:($font-size / 10) + rem;
}

@mixin bp($point) {
    @if $point == desktop-mini {
        @media screen and (max-width: 960px) { @content; }
    }
    @else if $point == tablet {
        @media screen and (max-width: 800px) { @content; }
    }
    @else if $point == mobile {
        @media screen and (max-width: 600px) { @content; }
    }
}

@mixin oswald() {
    font-family: "Oswald", sans-serif;
}
@mixin button($bg-color:$color-green-original, $hover-color:$color-grey-75-white) {
    @include border-radius(3px);
    @include font-size(16);
    @include oswald;
    @include transition(all 0.25s);
    background:$bg-color;
    border:solid 3px $bg-color;
    color:#fff;
    display:block;
    font-weight:normal;
    height:39px;
    line-height:39px;
    padding:0 10px;
    position:relative;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    z-index:0;
    -webkit-appearance:none;
    &:hover {
        background:$hover-color;
        color:$bg-color;
        cursor:pointer;
        //check to see what color the button is
        @if ($bg-color == $color-green-original) {
            //is the color lighter than the lightest grey module ie white
            @if ( lightness($hover-color) > lightness($color-grey-75-white) ) {
                border:solid 3px $bg-color;
                color:$bg-color;
            }
            //is it grey
            @else if ( lightness($hover-color) == lightness($color-grey-25-white) or lightness($hover-color) == lightness($color-grey-75-white) ) {
                border:solid 3px $color-green-50-black;
                color:#000;
            }
            //it is darker than both the module greys ie black
            @else {
                border:solid 3px $color-green-bright;
                color:$color-green-bright;
            }
        }
        @else if ($bg-color == $color-blue-original) {
            //is the color lighter than the lightest grey module ie white
            @if ( lightness($hover-color) > lightness($color-grey-75-white) ) {
                border:solid 3px $bg-color;
                color:$bg-color;
            }
            //is it grey
            @else if ( lightness($hover-color) == lightness($color-grey-25-white) or lightness($hover-color) == lightness($color-grey-75-white) ) {
                border:solid 3px $color-blue-25-black;
                color:$color-blue-25-black;
            }
            //it is darker than both the module greys ie black
            @else {
                border:solid 3px $color-blue-bright;
                color:$color-blue-bright;
            }
        }
    }
    &:active, &:focus {
        outline:none;
    }
    //special edge case for white buttons on a blue background
    @if ($hover-color == $color-blue-original and $bg-color == #fff) {
        color:$color-green-original;
    }
    @content;
    @include bp(mobile) {
        @include box-sizing(border-box);
        height:45px;
        line-height:39px;
    }
}
@import "compass/utilities/general/clearfix";

html {
  font-size: 62.5%;
}
.search-panel {
    @include clearfix;
    background:$color-blue-original;
    display:none;
    margin-bottom:20px;
    padding:20px;
    position:relative;
    .left {
        @include oswald;
        float:left;
        width:65%;
        .question {
            @include clearfix;
            @include font-size(24);
            line-height:38px;
            margin-bottom:10px;
        }
        span {
            color:$color-grey-50-black;
            float:left;
            line-height:38px;
            margin-right:5px;
        }
        .select {
            @include transition(all 0.5s);
            background:$color-blue-original;
            border-bottom:dotted 1px #fff;
            float:left;
            overflow: hidden;
            position:relative;
            z-index:0;
            &:after {
              @include font-size(14);
              color:#fff;
              content:"\25BC";
              display:block;
              line-height:37px;
              position:absolute;
              right:0;
              top:0;
              z-index:-1;
            }
            &:hover {
              &:after {
                color:$color-grey-50-black;
                z-index:1;
              }
              select {
                background:#fff;
                color:$color-grey-50-black;
                cursor:pointer;
              }
            }
            select {
                @include appearance(none);
                @include font-size(24);
                @include oswald;
                @include transition(all 0.5s);
                background:transparent;
                border:0;
                border-radius:0;
                color:#fff;
                float:left;
                font-weight:normal;
                height:37px;
                line-height:37px;
                margin:0 0 0 0;
                padding:0 30px 0 5px;
                position:relative;
                width:100%;
                &::-ms-expand {
                    display:none;
                }
                option {
                    @include font-size(18);
                    background:#fff;
                    color:$color-grey-50-black;
                }
            }
        }
        input[type=submit] {
            @include button($color-grey-50-black, $color-blue-original) {
                &:hover {
                    border-color:#fff;
                    color:#fff;
                }
            }
            line-height:normal;
            margin:0;
        }
    }
    .right {
        float:left;
        width:35%;
        color:#fff;
        span {
            display:block;
            margin-bottom:5px;
        }
        .search-box {
            margin-bottom:10px;
            position:relative;
        }
        input[type=text] {
            @include box-sizing(border-box);
            border:solid 4px $color-grey-75-white;
            font-size:14px;
            line-height:18px;
            margin:0;
            padding:7px;
            width:100%;
        }
        input[type=submit] {
            @include button($color-grey-50-black, #fff);
            border-radius:0;
            height:33px;
            line-height:normal;
            margin:0;
            position:absolute;
            right:3px;
            top:4px;
        }
        .advanced {
            @include button(#fff, $color-blue-original);
            float:left;
        }
    }
    .close {
        @include font-size(21);
        border:none;
        color:#000;
        font-weight:bold;
        padding:0 5px;
        position:absolute;
        right:5px;
        text-decoration:none;
        top:5px;
        &:hover {
            background:#000;
            color:$color-blue-original;
        }
    }
    &.open {
        display:block;
    }
    @include bp(tablet) {
        .left, .right {
            width:100%;
            margin-bottom:20px;
        }
        .left {
            .question {
                @include font-size(24);
                line-height:30px;
            }
            span {
                line-height:39px;
            }
            .select {
                select {
                    @include font-size(24);
                    line-height:32px;
                }
            }
        }
    }
    @include bp(mobile) {
        .right {
            input[type=submit] {
                height:33px;
                line-height:27px;
            }
        }
    }
}
//firefox hax
@-moz-document url-prefix() {
    .search-panel {
        .left {
            span {
                line-height:38px;
            }
            .select {
                select {
                    //height:42px;
                    -moz-appearance:menulist-text;
                    line-height:38px;
                    //margin: 0 -15px 0 0;
                    text-indent: 0.01px;
                    text-overflow: '';
                }
            }
        }
        @include bp(tablet) {
            .left {
                span {
                    //line-height:40px;
                }
            }
        }
        @include bp(mobile) {
            .left {
                span {
                    line-height:44px;

                }
            }
        }
    }
}
//ie hax
.ie, html[data-useragent*='MSIE 10.0'] {
  .search-panel {
    .left {
      .select {
        &:after {
          content:'';
        }
        select {
          background:transparent;
          padding:0;
          width:100%;
          option {
            background:transparent;
            color:#fff;
          }
        }
      }
    }
  }
}