disabled select tag doesn't have the color specified in css on chrome-CodePudding

select:disabled {
  background-color: #BBBBBB;
}

<select disabled>
  <option>test</option>
</select>

If you run the code above on chrome and then check the background color of the select tag using a color picker you will get #CFCFCF and not #BBBBBB

Doing the same on a tag works as expected, is this a bug in chrome or am I missing something?

CodePudding user response：

disabled changes the item's opacity. add opacity: 1;

select:disabled {
  background: #BBBBBB;
  opacity: 1;
}

<select disabled>
  <option>test</option>
</select>