How do I style a select dropdown with only CSS?
Here are three solutions:
Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)
--
To hide the default arrow set appearance: none
on the select element, then add your own custom arrow with background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Browser Support:
appearance: none
has very good browser support (caniuse) - except for Internet Explorer.
We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.
To at least undo our custom arrow - leaving the default select arrow intact.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
All together:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Styling Select Drop down box
Here's a DEMO.
Just add this CSS rule:
select > option {
background: color;
}
For example:
select > option {
background: pink; /* Or an hexadecimal value */
}
Cheers,
Leo!
How to style the option of an html select element?
There are only a few style attributes that can be applied to an <option>
element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
There are replacement plug-ins/libraries that look like a <select>
but are actually composed of regular HTML elements that CAN be styled.
How to set CSS for select and its dropdown menu when selected?
Figured it out. This blue color and click over input, select and textarea tag is due to bootstrap CSS. Removed the class form-control
from select and added following class. Everything is working fine now.
CSS:
/* Customized Select Box */
.customSelect {
background-color: #fff;
background-clip: padding-box;
border: 0.5rem solid #cbece5;
border-radius: 1.25rem;
color: #00a082;
display: block;
font-size: 2rem;
height: 3.5rem;
line-height: 1.5;
padding: 0.25rem 0.75rem;
width: 100%;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition-property: border-color, box-shadow;
transition-duration: 0.15s, 0.15s;
transition-timing-function: ease-in-out, ease-in-out;
transition-delay: 0s, 0s;
}
How to set max-height of dropdown selection area?
Specifying height:50px
is limiting the select to 50px. Use min-height
instead. Also wrap the select element in a div with fixed height so that it'll overlap on content below and not push it down.
.select-wrapper {
height: 50px;
overflow-y: visible;
}
.select {
width: 100%;
/* make it min-height*/
min-height: 50px;
border-radius: 25px;
border-color: #555;
padding: 10px;
}
<span>Select height is limited to 8 options.</span>
<div class="select-wrapper form-column form-column-field">
<select data-no-search="" data-placeholder="Выбрать год" onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" class="select select-no-search">
<option disabled="disabled">
<font style="vertical-align: inherit;">-Select Year</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1922</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1923</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1924</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1925</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1926</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1927</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1928</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1929</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1930</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1931</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1932</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1933</font>
</option>
</select>
</div>
<div class="footer__block" style="background-color:wheat;height:200px;border:2px dashed green">
<h3>Popular tags:</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.
</div>
Related Topics
How to Align One Element to The Right and One Element to The Left Inside a Containing Element
Changing Size and Content of Header at Scrolling in Browser with CSS
Image Right Edge Fade/Blur CSS
Zurb Foundation - Many Duplicate CSS Entries
Fixed Button Over a Scrollview
Making an Unordered List Span 100% The Width of a Div
Why Does an Absolute Position Element Wrap Based on Its Parent's Right Bound
Negative Left and Right Margin of .Row Class in Bootstrap
Why We Are Using Sass, Even We Are Using SCSS
Ionic-Item Color and Href Not Working
Percentage Max-Height on Image Ignored in Firefox
Scale Image Until Either X or Y Is The Same as The Container and Then Crop The Rest
Why Do Checkboxes Move When Checked in Safari
How to Use Float Without Flipping Floated Item and Changing in Source Order? Is This Possible
How to Force Nested List Items to Be The Same Width as Parent List Item
Flex-Flow: Column Wrap. How to Set Container's Width Equal to Content