Skip to content

Instantly share code, notes, and snippets.

@mikewlange

mikewlange/index.html

Created May 25, 2019 08:23
Show Gist options
  • Save mikewlange/b5f39ba2a344524b796df3f76b86dd66 to your computer and use it in GitHub Desktop.
Save mikewlange/b5f39ba2a344524b796df3f76b86dd66 to your computer and use it in GitHub Desktop.
Download ZIP
Natural language search styled select menus
Raw
index.html
<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>
Raw
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.

Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment