将css更改为“ selected = selected值”

Question

我正在使用shopify对电子商务的功能和CSS进行更改，而我一直试图更改代码中selected = selected选项的CSS。

列表：

这是代码：

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";

我试图通过内联传递属性：

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

还有我通过selected通过CSS在每个selected-item选项中创建的类<​​/ p>

我什至尝试添加JavaScript样式和:checked伪类。

我想不出任何其他方式来做，而我一直坚持下去。

有什么主意吗？

Answer 1

：checked伪类最初适用于具有选择和检查HTML4属性的元素

option:checked { display:none; }

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