无法在 Liquid-html 元素中设置属性 size=""

Question

我将动态项目传递给一个选择>选项，以使列表可以与项目一起选择，并且我想显示该“列表”内联（不带下拉菜单），为此我做了接下来的事情：

这是我的液体代码

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

这是我正在使用的 css

.pattern-select {
    display: inline-block;
    height: 3em;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pattern-select option{
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    float:left;
}

我只需要在<select... 中添加size="3" 作为属性以结束该功能，但是当我手动输入时，size="3" 未处理，就好像该属性尚未设置，因此我无法内联显示 select>option 结构。

这是我的 html 输出的样子：

<select class="pattern-select single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
   <option value="S" selected="selected">S</option>
   <option value="M">M</option>
   <option value="L">L</option>
   <option value="XL">XL</option>
</select>

有什么建议吗？

干杯！

Answer 1

最后因为我不能再扩展这个问题，我得到了<select> id 并通过 javascript 传递它的属性大小本身：

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