to change view of el-select input

Hallo,
In my vuejs 2.5 form I try to change view of select input
http://element.eleme.io/#/en-US/component/select

adding new css style like :

.el-select {
color: green !important;
background-color: yellow !important;
line-height: 1em;
height: 20px;
}

Code (CSS):

But my changes are not applyed:
https://jsfiddle.net/6vt886rg/3/

Whaich is the right way ?

Thanks!

 

Depending on the browser, <select> may or may NOT accept style changes. TECHNICALLY if elements were to be changed for background-color it would be <option>, not <select> -- and it does indeed work in Firefox, but BY THE SPECIFICATION <option> do NOT actually accept any styling.

Though you aren't actually using native <select> you're using vue.js' inaccessible broken scripttard pretend equivalents that flip the bird at accessibility.

In which case .el-select is the outer wrapping DIV and doesn't change the various .el-input div inside it... which is where your efforts should actually lie. Try targeting ".el-select .el-input {" instead of just ".el-select {"... no, that's not it. You'll have to use the document inspector to figure out in their train-wreck of ineptly developed tag soup just what selector their scripting is generating. It's probably something like .el-select-dropdown__item or .el-input__inner.

The sad laugh of this being the use of scripting to generate what should be a radio set with a dummy input for focus, 90%+ of the heavy lifting done by HTML and CSS not the JavaScript, but that's the mind-numbing asshattery that is vue.js for you.