How to Make Select Element Be Transparent in Chrome

How to Make Select Element be Transparent in Chrome?

select {  width:192px;  padding:2px;  border:none;  background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;  -webkit-appearance: none;}
<select>  <option value="abcdefg">abcdefg</option>  <option value="1234567">1234567</option>  <option value="abcdefg">abcdefg</option></select>

Select with transparent background and white text causes options to be invisible in Chrome

you can just set different color to text inside select options

html, body {
background: black;
}

select {
background: transparent;
color: white;
}

#mySelect *{
color: black;
}
<select id='mySelect'>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Does select's box transparent background work in Chrome?

You will probably find -webkit-appearance: none; useful. <select>s are notoriously difficult to style, you may want to consider making your own if you're after a non-custom look and feel.

jsFiddle

.outter_div select {
-webkit-appearance: none;
}

White boxes in select element using Chrome

Change overflow:scroll; to overflow: auto; in your .dropdown class

.dropdown { position: relative; margin: 0 auto; top: 10; left 50%; width: 190px; height: 2em; line-height: 2; background: #E9B6B0; overflow:auto ; border-radius: .35em; margin-bottom: 5px;
}.dropdown select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background-image: none; /* remove the value that chrome dose not use */ background-color: #E9B6B0; /* set the value it does */ border-radius: 4px; /* make it look kinda like the background image */ border: 1px solid #888; outline: 0; box-shadow: none; border: 0 !important; background: #E9B6B0; width: 100%; height: 100%; margin: 0; padding: 0 0 0 .5em; color: black; cursor: pointer; font-size: 15px;
}
.dropdown::after { content: '\25BE'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 1em; background: #E9B6B0; pointer-events: none;}
.dropdown:hover::after { color: white;}.dropdown::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease;}
<div class="dropdown"> <select id="genre" onchange="filterConcerts()" value="default">  <option value="default">Sjanger</option></div>

Semi-transparent Select element in HTML

Don't go for the background-color:rgba, use opacity:x instead. IE9, Chrome, FF, Opera and Safari use this for transparency.
For example:

<select style="opacity:0.5;">

Opacity takes values between 0 (full transparent) and 1.

Although you're mainly targeting modern browsers, for IE8 and earlier you have to use filter:alpha(opacity=50) (with respect to the above example; opacity here accepts values between 0 and 100).

So in conclusion

<select style="opacity:0.5;filter:alpha(opacity=50);">

gives you a semi-transparent select control supported by modern browsers plus IE8 and earlier.

With this technique, the selects childs options will also gain the specified opacity, so the text of the option-tags will be faded out, too.

Mikkel Fausing found out that using background-color:rgba(r,g,b,a) in combination with -webkit-appearance: none; doesn't fade the text, but - if applied to a select - it removes the little arrow indicating that this control is a dropdownbox. For example:

<select style="background-color:rgba(0, 0, 0, 0.2); -webkit-appearance:none;">

How can I change the appearance of a select element in the Chrome browser?

There's a lot wrong with your CSS right now.

  1. just use form not .form to refer to the element
  2. You don't want select.disabled as that refers to a class, you want select[disabled="disabled"] as disabled isn't a class it's an attribute so you want to use the brackets as an attribute selector. You've also disabled the dropdown menu so I don't even know what the point of the last CSS statement is for, you seem to be trying to make the option transparent, which you can't because the dropdown is disabled.

Since you apparently want to make the form fully opaque despite being disabled, remove the option from your last CSS selector and make the above changes, and everything should work.

HTML:

<form>
<select data-ng-disabled="!option.selectedSubject" data-ng-model="option.selectedContentType" data-ng-options="item.id as item.name for item in option.contentTypes" class="ng-pristine ng-valid" disabled="disabled">
<option style="display: none" value="" class="">Select Content Type</option>
</select>
</form>

CSS:

form input.disabled, form select.disabled, form textarea.disabled {
color: #A9A9A9;
border: 1px solid #adcede;
opacity: 0.5;
}
form select[disabled="disabled"]{
color: #000;
opacity: 1;
}

JSFiddle: http://jsfiddle.net/HcaF2/



Related Topics



Leave a reply



Submit