0

I have been figuring out a way of styling the default option tag from select input with CSS only. Seems like the option tag supports very less CSS. Does anybody know if there any work around of styling the options from the select input such as: changing the borders and colors, putting space between the items, changing the default selected color which is blue. Any ideas would be highly appreciated.Thanks

ninja
  • 95
  • 8
  • Depending on the framework that you are using, there are many plugins out there that give you a ton of capabilities for styling selects by converting them HTML divs/lists with CSS/JS. – imvain2 Apr 28 '20 at 19:01
  • [This question was answered a few years ago](https://stackoverflow.com/a/7208814/13422194) – borko_24 Apr 28 '20 at 19:06
  • I need to use only html and css,I know with frameworks like bootstrap or others can be beneficial. I am just wondering if it is possible to do this with pure html and css only.I have seem those links before but that didn't say,how can I change the default selected color which is blue by default or the border can be adjusted or not... – ninja Apr 28 '20 at 19:20

1 Answers1

2

Style the <select> tag instead of the <option> tag you can see this by pasting the below on your code and you can see more here: https://www.w3schools.com/howto/howto_custom_select.asp

select{
    color: #fff;
    background-color:red;
    border:none;
    border-radius: 0.5em;
    padding: 2em;
    }

Editing to tailor specifications from user requesting this:

A way to achieve this would be to specify an attribute inside of the <option> tag, it can really be 'Anything' but there are some attributes like the selected that are reserved for the system, so make sure you are not using selected on everything if you are going to use this on a form.

use the following CSS

option{
    color: red;
}
[selected]{
 font-weight: 900;
 color: Green;
 background-color: pink;
}
[anything]{
color: blue;
 background-color: yellow;
}

With the following Html

<body>

<h1>The option element</h1>

<label for="cars">Choose a car:</label>

<select id="cars">
  <option selected value="volvo">Volvo</option>
  <option anything value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>

I hope that solves it!

Mixael Contreras
  • 61
  • 6
  • thanks for the info. there are so many good examples how to style the select tag but and this is what not I am looking for. I have to style the option tag and specially the default selection blue colors and the borders around it... – ninja Apr 28 '20 at 22:40
  • Check my update above! – Mixael Contreras Apr 28 '20 at 23:30
  • although,I was still not able to remove the default blue color from the selected items but I would say, it was nice work around from you,,,, – ninja Apr 28 '20 at 23:43