to change view of el-select input

Discussion in 'CSS' started by mstdmstd, Jan 4, 2018.

  1. #1
    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!
     
    mstdmstd, Jan 4, 2018 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Jan 4, 2018 IP