html - Changing select border when it is expanded

Question

I am trying to change the border of a select item but only when it is expanded and showing the options any idea how to do it???

Answer 1

详细地问你的问题。

要编辑 html 中的任何小部件，如文本框、文本字段、按钮......，您必须包含样式标签。学习风格标签在这里

Answer 2

这是一个简单的例子；

在 HTML 中，

<select>
    <option>option 1</option>
    <option>option 2</option>
</select>

在 CSS 中，

select { 
    border-color: red;
    border-width: 5px; 
}
select:focus {
    border-color: blue;
}

一旦用户使用选择框，这会将边框颜色从红色更改为蓝色。

edit1 ： 显然，当用户选择了一个选项时，边框会保持蓝色，直到他/她点击了选择框外的其他元素。一个小修复是使用悬停选择器。但是当用户悬停选择元素时它也会改变颜色，即使没有显示选项窗口。

select:hover {
    border-color: blue;
}

随意看看哪一个对你有好处。