1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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 ?
    SEMrush
    Thanks!
     
    mstdmstd, Jan 4, 2018 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,670
    Likes Received:
    1,564
    Best Answers:
    226
    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