CODEWITHSUNDEEP
javascripthtml
NicolasZ
NicolasZ

Reputation: 993

Style the background of a dropdown

I am trying to get rid of the white background behind the options in a dropdown menu, so far this is my code:

CSS:

select {
    margin: 50px;
    border: 1px solid white;
    background: transparent;
    width: 50%;
    padding: 5%;
    height: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select > option
{
color:transparent;
}
    .blueLabel
{
 background: linear-gradient(to right bottom,  #2D3C43 0%,#2D3C43 50%,#243137 50%,#243137 100%);  
}

HTML:

<div class = "blueLabel">
<select>
    <option>option 1</option>
    <option >Kuku</option>
    <option>Yeah, why not</option>
    <option>I think is = 7</option>
</select>
<div>

Fiddle

I want it to be transparent. Problem is, no matter what i do it is still white, i can't get rid of it

Upvotes: 0

Views: 96

Answers (3)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

If you set the size property of the select element (along with background: transparent), you get this:

enter image description here

You can add event listeners so that the size property is changed only when the select box has focus. You have to be careful with propagating events, and you need to blur the select box on click but not on focus:

var sel= document.querySelector('select'),
    inSelect= false,
    timer;

sel.addEventListener('focus', function() {
  this.size= this.options.length;
  clearTimeout(timer);
  timer= setTimeout(function() {
    inSelect= true;
  },500);
});

sel.addEventListener('blur', function() {
  clearTimeout(timer);
  inSelect= false;
  this.size= 1;
});

sel.addEventListener('change', function() {
  this.blur();
});

sel.addEventListener('click', function(event) {
  if(inSelect) {
    this.blur();
  }
  else {
    event.preventDefault();
    event.stopPropagation();
    return false;
  }
});

Working Fiddle

Upvotes: 1

Frank
Frank

Reputation: 2230

I didn't test this, but most elements seem to go transparent with this approach:

background-color:rgba(0,0,0,0);

Actually, that doesn't work. It appears that only opaque backgrounds can be rendered on selector option dropdown panes in CSS. That's kind of lame.

Upvotes: 0

Nate Barbettini
Nate Barbettini

Reputation: 53700

You can fake it pretty close by using background-color:

select > option {
    background-color: blue;
}

Updated fiddle: http://jsfiddle.net/0s1moa4a/2/

If you actually want transparent option backgrounds, see this answer which suggests using a third-party control as a truly transparent background is impossible with pure CSS.

Upvotes: 1

Related Questions