How to style select option?

Question

I was wondering if there is a way to make the dropdown box background colour disappear. So far I have the actual first part, were it says "lease Select Type Of Skis" that part is transparent. But when they click on the down arrow, the background colour of the options is grey. I want it to be nothing there.

I was also wondering how to get rid of the blue around the option when the arrow is clicked, so there is no blue what so ever.

HTML:

<select name="cars" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
    <option value="" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
    <option value="0">a</option>
    <option value="1">b</option>
</select>

CSS:

body {
  background-image: url(http://iliketowastemytime.com/sites/default/files/imagecache/blog_image/hd-wallpaper-winter-mountains-scene.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  font: 16px/26px "Raleway", sans-serif;
  text-align: center;
}

select {
  font: 16px/26px "Raleway", sans-serif;
  background: transparent;
  color: white;
  border: 0;
}

select option {
  margin: 40px;
  color: Red;
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
}

Fiddle link: Link

score 1 · Accepted Answer · answered Sep 23 '17 at 00:14

I don't think there is a way to do it with CSS, you would have to hide the select, duplicate it with a list, and then replicate the functionality.

This needs to be cleaned up a lot, but should get you started:

https://jsfiddle.net/94mb53mj/

$(function() {
  var options = $("select option").map(function() {
    return $("<li style='display: none' data-value='" + $(this).attr('value') + "'>" + $(this).text() + "</li>")
  }).get();
  var $ul = $("<ul></ul>");
  $ul.append(options)
  $("select").hide().after($ul)
  $("li").first().show().on("click", function() {
    $(this).siblings().toggle();
  }).siblings().on("click", function() {
    $("select").val($(this).data("value"));
    $("li").first().html($(this).html()).siblings().toggle();
  });
})

score 1 · Answer 2 · answered Sep 23 '17 at 00:15

1

As far as I know, what you're looking for cannot be done with inbuilt CSS. The CSS of the select can be changed, but the CSS customization for the select option is limited to background-color and color and maybe a few more. This is because the styling for the option is handled by the browsers.

But as always, you can use a jquery plugin that emulates the select box. And then go crazy with customization.

answered Sep 23 '17 at 00:15

Roman Skydan

5,478
4
19
39

Is there a way to get rid of the blue when you click on it? – RonTheOld Sep 23 '17 at 00:16
Do you mean blue border in the select when it active or background of selected option? – Roman Skydan Sep 23 '17 at 00:19
the blue border around the select options, so when you click the arrow and the drtop down box comes – RonTheOld Sep 23 '17 at 00:20
Ah sorted it :0 thanks x – RonTheOld Sep 23 '17 at 00:20
How I know you can change the background for options in some browser on windows. But in macOS, you always will have the standard view for select. That's why I think better way for you choose some js or jquery plugin like this https://select2.org/. If you don't want use js and want have stylized select you can do something like this. But this is not good idea ;) https://codepen.io/n1ghtman/pen/KrRgQp – Roman Skydan Sep 23 '17 at 00:31

How to style select option?

2 Answers2