Natural language search styled select menus

5/25/2019 - 8:23 AM

Natural language search styled select menus


 
  <div class="search-panel open">
    <div class="left">
      <div class="question">
        <span class="text">Whats My Return with a</span>
        <span class="select">
          <select name="forum$ctl01$FirstDropDown" id="forum_ctl01_FirstDropDown">
            <option value="diagnosis">$200</option>
            <option value="treatment">$1000</option>
            <option value="living-with-cancer" selected>$5000</option>
          </select>
        </span>
        <span class="text">initial investment and a</span>
        <span class="select">
          <select name="forum$ctl01$FirstDropDown" id="forum_ctl01_FirstDropDown">
            <option value="200">$200</option>
            <option value="1000">$1000</option>
            <option value="5000">$5000</option>
          </select>
        </span>
        <span class="text">monthly investment after</span>
        <span class="select">
          <select name="forum$ctl01$SecondDropDown" id="forum_ctl01_SecondDropDown">
            <option value="5">5 years</option>
            <option value="10" >10 years</option>
            <option value="20" >20 years</option>
          </select>
        </span>

   <div class="submit">
           <input type="submit" value="calculate" ></input>
      </div>
       
      </div>
        
    </div>

       
     
  </div>

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

Rendered
Source

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.css

html {
  font-size: 62.5%;
}

.search-panel {
  overflow: hidden;
  *zoom: 1;
  background: #1391C9;
  display: none;
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
    width: 105%;
}
.search-panel .left {
  font-family: "Oswald", sans-serif;
 
  width: 105%;
}
.search-panel .left .question {
  overflow: visible;
  *zoom: 1;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 38px;
  margin-bottom: 10px;
    width: 105%;
}
.search-panel .left span {
  color: #333333;
  float: left;
  line-height: 38px;
  margin-right: 15px;
}
.search-panel .left .select {
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: #1391C9;
  border-bottom: dotted 1px #fff;
  float: left;
  overflow: visible;
  position: relative;
  z-index: 0;
}
.search-panel .left .select:after {
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  content: "\25BC";
  display: block;
  line-height: 37px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.search-panel .left .select:hover:after {
  color: #333333;
  z-index: 1;
}
.search-panel .left .select:hover select {
  background: #fff;
  color: #333333;
  cursor: pointer;
}
.search-panel .left .select select {
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 24px;
  font-size: 2.4rem;
  font-family: "Oswald", sans-serif;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  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%;
}
.search-panel .left .select select::-ms-expand {
  display: none;
}
.search-panel .left .select select option {
  font-size: 18px;
  font-size: 1.8rem;
  background: #fff;
  color: #333333;
}
.search-panel .left input[type=submit] {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "Oswald", sans-serif;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  background: #333333;
  border: solid 3px #333333;
  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;
  line-height: normal;
  margin: 0;
}
.search-panel .left input[type=submit]:hover {
  background: #1391C9;
  color: #333333;
  cursor: pointer;
}
.search-panel .left input[type=submit]:active, .search-panel .left input[type=submit]:focus {
  outline: none;
}
.search-panel .left input[type=submit]:hover {
  border-color: #fff;
  color: #fff;
}
@media screen and (max-width: 600px) {
  .search-panel .left input[type=submit] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    line-height: 39px;
  }
}
.search-panel .right {
  float: left;
  width: 35%;
  color: #fff;
}
.search-panel .right span {
  display: block;
  margin-bottom: 5px;
}
.search-panel .right .search-box {
  margin-bottom: 10px;
  position: relative;
}
.search-panel .right input[type=text] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 4px #E6E6E5;
  font-size: 14px;
  line-height: 18px;
  margin: 0;
  padding: 7px;
  width: 100%;
}
.search-panel .right input[type=submit] {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "Oswald", sans-serif;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  background: #333333;
  border: solid 3px #333333;
  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;
  border-radius: 0;
  height: 33px;
  line-height: normal;
  margin: 0;
  position: absolute;
  right: 3px;
  top: 4px;
}
.search-panel .right input[type=submit]:hover {
  background: #fff;
  color: #333333;
  cursor: pointer;
}
.search-panel .right input[type=submit]:active, .search-panel .right input[type=submit]:focus {
  outline: none;
}
@media screen and (max-width: 600px) {
  .search-panel .right input[type=submit] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    line-height: 39px;
  }
}
.search-panel .right .advanced {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "Oswald", sans-serif;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  background: #fff;
  border: solid 3px #fff;
  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;
  color: #19AC40;
  float: left;
}
.search-panel .right .advanced:hover {
  background: #1391C9;
  color: #fff;
  cursor: pointer;
}
.search-panel .right .advanced:active, .search-panel .right .advanced:focus {
  outline: none;
}
@media screen and (max-width: 600px) {
  .search-panel .right .advanced {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    line-height: 39px;
  }
}
.search-panel .close {
  font-size: 21px;
  font-size: 2.1rem;
  border: none;
  color: #000;
  font-weight: bold;
  padding: 0 5px;
  position: absolute;
  right: 5px;
  text-decoration: none;
  top: 5px;
}
.search-panel .close:hover {
  background: #000;
  color: #1391C9;
}
.search-panel.open {
  display: block;
}
@media screen and (max-width: 800px) {
  .search-panel .left, .search-panel .right {
    width: 100%;
    margin-bottom: 20px;
  }
  .search-panel .left .question {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 30px;
  }
  .search-panel .left span {
    line-height: 39px;
  }
  .search-panel .left .select select {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 32px;
  }
}
@media screen and (max-width: 600px) {
  .search-panel .right input[type=submit] {
    height: 33px;
    line-height: 27px;
  }
}

@-moz-document url-prefix() {
  .search-panel .left span {
    line-height: 38px;
  }
  .search-panel .left .select select {
    -moz-appearance: menulist-text;
    line-height: 38px;
    text-indent: 0.01px;
    text-overflow: '';
  }
  @media screen and (max-width: 600px) {
    .search-panel .left span {
      line-height: 44px;
    }
  }
}
.ie .search-panel .left .select:after, html[data-useragent*='MSIE 10.0'] .search-panel .left .select:after {
  content: '';
}
.ie .search-panel .left .select select, html[data-useragent*='MSIE 10.0'] .search-panel .left .select select {
  background: transparent;
  padding: 0;
  width: 100%;
}
.ie .search-panel .left .select select option, html[data-useragent*='MSIE 10.0'] .search-panel .left .select select option {
  background: transparent;
  color: #fff;
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Natural language search styled select menus

Natural language search styled select menus