How to set opacity ONLY to the background

Question

I have an issue here, I am trying to use a HTML5 select element, I need to set this element to be transparent, but once I put the opacity property, then the letters/content of the select element becomes transparent, like this

so all I need is to set that element's background transparent, is there a way to do that, or I need to set the background color of the element as the same blue color on the background of that picture ?

  select {
    background-color: get-color(nieve);
    border: 2px solid get-color(golden-poppy);
    border-top: 0;
    color: get-color(night);
    opacity: 0.4;
  }

Answer 1

You can specify the background color with rgba()

element{
   background-color: rgba(255, 255, 255, 0.5);
}

The first three values are the RGB levels, and the last one is the opacity (in this case 50% opaque, the higher the number the less transparent)

Answer 2

You can set background-color using rgba ()

select {
    background-color: rgba(128, 128, 128, .4);
    border: 2px solid get-color(golden-poppy);
    border-top: 0;
    color: get-color(night);
}