Change css to "selected=selected value"

Question

I am applying changes to the functionality and css of an e-commerce with shopify and I am stuck trying to change the css of the selected = selected option of my code.

The list:

And this the code:

HTML:

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
   {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected" class="selected-item"{% endif %} id="opcion-selector">{{ value }}</option>
   {% endfor %}
</select>

CSS:

#SingleOptionSelector-0 {
    margin-top: -5px;
    display: inline-block;
    height: 3em;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: 'ITC Souvenir Std';
    background-color: #eef3eb;
    overflow: hidden;
    background: none;
}

#SingleOptionSelector-0 option {
    color: #eb3439;
    width: 2.5em;
    float: left;
    background-color: #eef3eb;
    text-align: center;
    font-size: 13px;
}

JS:

document.getElementById("SingleOptionSelector-0").size="3";

I tried to pass property inline:

<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected" class="selected-item" style="color:red"{% endif %} id="opcion-selector">{{ value }}</option>

Also with the class that I create in each of the selected options via css through selected-item

I have even tried adding JavaScript style and :checked psuedo class.

I can't think of any other way to do it and I'm stuck with this.

Any idea?

Was the :checked pseudo-class able to solve your problem? If not, let us know the CSS you are using, and can you clarify that the ".selected-item" class is in fact being properly applied to the element? — Joe Majewski, Sep 20 '19 at 14:39
@JoeMajewski No it wasn't, that class was just a test to try to change the css. It shouldn't be there — marcdecline, Sep 21 '19 at 13:53

score 2 · Answer 1 · answered Sep 20 '19 at 14:26

2

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

answered Sep 20 '19 at 14:26

Roman Panevnyk

313
3
7

It was the first thing i tried to use, it doesn't affect to the ```selected``` item – marcdecline Sep 21 '19 at 13:53

Change css to "selected=selected value"

1 Answers1