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.
- just use
form
not.form
to refer to the element - You don't want
select.disabled
as that refers to a class, you wantselect[disabled="disabled"]
asdisabled
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
Allowed Characters for CSS Identifiers
How to Display 3 Items Per Row in Flexbox
Hover on Child Without Hover Effect on Parent
How to Remove Extra Margin Space Generated by Inline Blocks
Animated Cursor Support in Web Applications
IE6/IE7 CSS Border on Select Element
How to Apply Multiple Transform Declarations to One Element
Media Query Not Working in IE9
Why Don't Margin-Top: Auto and Margin-Bottom:Auto Work the Same as Their Left and Right Counterparts
::Before Pseudo-Element Stacking Order Issue
How to Implement Wordwrap on Jqgrid Which Works on IE7, IE8 and Ff
CSS Selector to Get Deepest Element of Specific Class in the HTML Tree
Bootstrap: Position of Dropdown Menu Relative to Navbar Item
Less Mixin a Variable Class Name
Webpack "Ots Parsing Error" Loading Fonts
Is It Bad Practice to Comment Out Single Lines of CSS with //