Question

我正在尝试定位此select标记中的所选选项。是否有一个:: selected psuedo类可以用来操作它？

<div class="form-group">
    <select class="form-control" id="category">
        <option disabled selected>Gifts by category</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

Answer 1

您应该可以使用属性选择器选择它。像这样：

#category option[selected] { /*styles*/ }

这是fiddle

Answer 2

您无法设定选项的样式。

您可以使用此css删除选择本身的默认样式，但是......

请参阅代码段：

＆＃13;

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

＆＃13;

<select class="select">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
  <option>F</option>
</select>

＆＃13;

或者您可以使用其中之一：https://codepen.io/ericrasch/pen/zjDBx

使用CSS定位选择选项

2 个答案: