Styling Dropdowns (Select) Boxes

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!

Styling a select dropdown with JS and CSS breaks functionality

Your site has more than one select so to use the values of the selects, you can do this

const vals = [...document.querySelectorAll(".pt-cv-wrapper .cvp-dropdown")]
  .map(sel => sel.querySelector('.select-selected').textContent)
  .filter(val => !val.startsWith("Select"));

if (vals.length > 0) {
  console.log("Filtering on " + vals.join(", "))
  document.querySelectorAll(".pt-cv-ifield")
    .forEach(div => div.hidden = [...div.querySelectorAll(".terms a")]
      .filter(link => vals.includes(link.title)).length === 0)

Styling colors of select box (with custom wrapper) dropdown text with css

You can achieve this by adding the following to your CSS:

option:not(:checked) {
  color: #000;
}

And changing the default color on the .styled-select select to color:#fff, this way the options that weren't selected will have a black text color, while the selected one has a white text color

For more on the :not() selector go here (w3schools)

For more on the :checked selector go here (w3schools)

Hope this helps!

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 style drop down list?

Check this out - http://bavotasan.com/2011/style-select-box-using-only-css/

html

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

css

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}

For more elaborate styling you need to use javascript - like this http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

---

Related Topics