CSS not overriding USER AGENT STYLE for text color when the checked state of the select OPTION

Question

We are facing an issue with CSS text color handling. when we take off the focus from the option in checked state there is a user agent style are applying on it. Even !important also not working.

.msi-standard .default-window-style .window-main-layout .dialog-window-content .v-select select option:checked {
    background-image: -webkit-linear-gradient(-270deg, #9a1032, #9a1032);
    background-image: linear-gradient(0deg, #9a1032, #9a1032);
    color: #FFF;
}

The above code our custom code. But the below user agent styles are overriding our CSS code.

select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;
}

we have the solution for overriding the background color but we are yet to reach the solution for overriding the Text COLOR.

We need the solution for overriding the text color.

Possible duplicate of [Keep background color for option when changing focus](https://stackoverflow.com/questions/36455491/keep-background-color-for-option-when-changing-focus) — Xoog, Jan 25 '18 at 09:14
make sure your ` ` is correctly written, and appears at the top of your HTML., common issue. — Ylama, Jan 25 '18 at 09:14
Controls are notoriously hard to style. That said, Have you tried `appearance: none` on the options? And can you provide a [mcve]? — Mr Lister, Jan 25 '18 at 09:18
@Ylama Thank you for reply Yes html 5 doc type is correct in my code. — Shenic Roy, Jan 25 '18 at 09:20

Ylama · Answer 1 · 2018-01-25T10:25:15.693

I played around with the styles, should help you: also added an div around the select to accomplish what the needs are.

Have a look, and i hope it helps. You can adjust as you wish obviously this is the idea behind the solution only.

.test select{
   background: transparent;
   border: 1px solid green;
   font-size: 14px;
   height: 29px;
   padding: 5px; 
   width: 268px;
   }
 

select#mer {
   -webkit-appearance: button;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
   
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
}

select#mer option:checked {
    background: blue;
    background-image: -webkit-linear-gradient(-270deg, #9a1032, #9a1032);
    background-image: linear-gradient(0deg, #9a1032, #9a1032);
    color: red;
}

<div class="test">
<select id="mer">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

CSS not overriding USER AGENT STYLE for text color when the checked state of the select OPTION

1 Answers1