将css更改为"selected=selected value“

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>

还有我通过css到selected-item在每个selected选项中创建的类。

我甚至尝试添加了JavaScript样式和:checked psuedo类。

我想不出任何其他的方法来做这件事，我被困在这件事上了。

有什么想法吗？

Answer 1

checked伪类最初应用于具有选定和选中HTML4属性的元素

​

option:checked { display:none; }

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

​