2

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

Improve this question
0

2 Answers 2

Reset to default
1

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(); }); })
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

5 Comments

Is there a way to get rid of the blue when you click on it?
Do you mean blue border in the select when it active or background of selected option?
the blue border around the select options, so when you click the arrow and the drtop down box comes
Ah sorted it :0 thanks x
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 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 ;) codepen.io/n1ghtman/pen/KrRgQp

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.