Change color of Select disable option in Vuejs

Question

I want to set a placeholder for a select input in Vuejs

The example in this PEN. https://codepen.io/halcolo/pen/ZELVVvw

In this example, I want to change the color of the default value Years in service (My placeholder for this select input) I'm trying to change the CSS.

option[value=""][disabled]{
   color: #bebebe
}

But don't change anything, I used this after but at this case it does not work

Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) You can not style options in select. It has nothing to do with vue. — ikiK, Apr 23 '21 at 18:15

score 0 · Accepted Answer · answered Apr 29 '21 at 01:13

Set an ID in the select

<select @change="onChangeEvent(field)" :id="field.label" class="Select" >

Unlock the appearance of select with this CSS.

.select .Select{
 -webkit-appearance: none; /* WebKit */
 -moz-appearance: none; /* Mozilla */
 -o-appearance: none; /* Opera */
 -ms-appearance: none; /* Internet Explorer */
 appearance: none; /* CSS3 */
 color:#bbb;
}`

Create a method on change event and use it as a change in the select

 onChangeEvent(field){
   console.log(field.label)
   document.getElementById(field.label).style.color = "#000000";

For the complete example. https://codepen.io/halcolo/pen/ZELVVvw

Change color of Select disable option in Vuejs

1 Answers1