Why Is The HTML Select Background-Color Black in Chrome When Set to Transparent

Why is the html select background-color black in Chrome when set to transparent?

According to this and this, it is a bug in Chrome that is supposed to be fixed.

The bug appears in version 2.0. I just tested it in 3.0-beta, and it's fixed.

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;
}

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>

HTML Select Tag with black background - dropdown triangle is invisible in Firefox 3

Must be a Vista problem. I have XP SP 2 and it looks normal.

Background/element goes black when entering Fullscreen with HTML5

The default background color of the browser's full-screen "visual environment" is black. Your content actually is there, but it's currently black text on black background, so you can't see it (try highlighting or pressing Ctrl+A to see for yourself).

If you want to make the background a different color, you must specify a CSS rule to set the background-color property to something other than the default. This was once done universally by setting a background-color property applied to the fullscreened element selected with the :fullscreen pseudo-class, but now the correct way to do so is to modify the element's associated ::backdrop peudo-element.

#container::backdrop {
    background-color: rgba(255,255,255,0);
}

Note that :fullscreen pseudo-class still works as a selector to alter other properties of fullscreened elements, but cannot reliably cause any background-related properties to be rendered. (If you wanted to be really robust, you could apply your background to both ::backdrop and :fullscreen.)

So, to apply a background color to any fullscreened element (i.e., not restricting our styling to any particular element(s) of interest), with support for browsers that either don't support ::backdrop or don't support :fullscreen background styles, you could do:

:fullscreen, ::backdrop {
    background-color: rgba(255,255,255,0);
}

CSS for Dropdown does not works fine in Chrome and IE

I think your problem in Google Chrome has to do with a bug in version 2.0, but it's solved in 3.0. Here you have a topic about this with link to the bugs:

Why is the html select background-color black in Chrome when set to transparent?

About IE, are you using IE 7 or lower? If so, transparent background is not supported in them. You should apply the same background color than the parent specifically to IE7 and lower (for example with a hack).

Set transparent background color div over black parent border

You could always put the "transparent" color as .menu-alias .alias.aliselected background-color.

.menu-alias .alias.aliselected {
   background-color:#f7caad;
   margin-bottom: -1px;
}

Fiddle here: https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/

---

Related Topics