How to Customize a Select Element Through CSS to Achieve This Dark Style

How to customize a select element through CSS to achieve this dark style?

Here is a CSS-powered select menu; you can customize it as you need to:

label.custom-select {    position: relative;    display: inline-block;
}
.custom-select select {    display: inline-block;    padding: 4px 3px 3px 5px;    margin: 0;    font: inherit;    outline:none; /* remove focus ring from Webkit */    line-height: 1.2;    background: #000;    color:white;    border:0;}
/* Select arrow styling */.custom-select:after {    content: "▼";    position: absolute;    top: 0;    right: 0;    bottom: 0;    font-size: 60%;    line-height: 30px;    padding: 0 7px;    background: #000;    color: white;    pointer-events: none;}
.no-pointer-events .custom-select:after {    content: none;}

<label class="custom-select">    <select>        <option>Sushi</option>        <option>Blue cheese with crackers</option>        <option>Steak</option>        <option>Other</option>    </select></label>

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

Select arrow style change

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

How to toggle many css styles to make a dark mode?

Just add the class dark-mode to your body tag with JavaScript, then define all your dark styles with .dark-mode in front of them, like this:

a {
    color: #330033; /* or whatever dark color */
}

.dark-mode a {
    color: white; /* or whatever light color */
}

For more info on CSS specificity and cascading, see this page:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I recommend grouping all dark mode styles together with a comment above them, like this /* Dark mode styles: */, and put them toward the bottom of your stylesheet (above any responsive breakpoints), so they're together, and they're after your regular styles - because CSS takes the last defined style (hence, cascading). That way you don't run into problems with re-defining styles. Make sure all overriding styles have more specificity than the ones they're attempting to override. Try to avoid use of !important where possible.

Modify Select So Only The First One Is Gray

Here is a more modern solution so it's not specific to the first option, but rather an invalid option and requires no JS to show only the title/placeholder option as grey whereas the rest appear normal.

select,
select option {
  color: #000000;
}

select:invalid,
select option[value=""] {
  color: #999999;
}

label {
  display: block;
  margin: 16px 0;
}

/*Added for browser compatibility*/
[hidden] {
  display: none;
}

<label>
    Invalid option cannot be selected and is hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled hidden>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option cannot be selected, but is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option can be selected and is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

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!

Style select element based on selected option

Unfortunately, yes - this is something not currently possible with only CSS. As mentioned in the answers and comments to this question, there is currently no way to make the parent element receive styling based on its children.

In order to do what you're wanting, you would essentially have to detect which of the children (<option>) is selected, and then style the parent accordingly.

You could, however, accomplish this with a very simple jQuery call, as follows:

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery

var $select = $('select');
$select.each(function() {
    $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

CSS

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

Here is a working jsFiddle.

Back to the question about the future of selectors. Yes - the "Subject" selectors are intended to do exactly what you mention. If/when they ever actually go live in modern browsers, you could adapt the above code to:

select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }

As a side-note, there is still debate about whether the ! should go before or after the subject. This is based on the programming standard of !something meaning "not something". As a result, the subject-based CSS might actually wind up looking like this instead:

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }

How do I style each option in select to use a different font (using materialize css framework)

@kushal It worked thanks.. now I got it.. I targeted span element after every nth-child

.select-dropdown>li:nth-child(2)>span{
font-family: 'Indie Flower', cursive;
font-size: 1.5em;
color: black;
}
.select-dropdown>li:nth-child(3)>span{
font-family: 'Dawning of a New Day', cursive;
font-size: 1.8em;
color: blue;
}

And so on..
Here is the result
https://ibb.co/gvfMyWq

---

Related Topics