Styling select tags using CSS

user_2512500 0
Viewed 2596

I would like to know how to styling the select tags for this image below enter image description here

I was able to custom the dropdown (code below):

select {
  padding: 1em;
  width: 130%;
  border-radius: .2em;
  border: 1px solid #acacac;
  color: #181820;
  
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  
  background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right;
  background-origin: content-box;
}
css html
1 Answers

You can't really. Check this snippet from mdn: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <select> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

Do indeed check the advanced guide for the little you can do to style them. A good example of how bad styling is for options:

You'll notice that the options don't inherit the font set on the parent. You also can't consistently set things like spacing and colors. For example, Firefox will apply color and background-color when set on the <option> elements, Chrome won't. Neither of them will apply any kind of spacing

user_16436760
Related