javascript - 将 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>

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

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

我想不出任何其他方法来做到这一点，我被困住了。

任何想法？

标签： javascripthtmlcssshopifyliquid

Answer 1

:checked 伪类最初适用于具有 HTML4 selected 和 checked 属性的元素

option:checked { display:none; }

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