css下拉框添加focus

CSS 下拉框有多种设置，其中添加 focus 能够使得用户使用更加便利。下面是一个添加 focus 的CSS 下拉框的实例：

CSS代码：

.drop-down {
    position: relative;
    display: inline-block;
}

.drop-down select {
    width: 100%;
    margin: 0;
    padding: 8px 20px 8px 10px;
    font-size: 16px;
    line-height: 1.3;
    border: none;
    outline: none;
    background: #f1f1f1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.drop-down:focus-within:before {
    content: "?";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #555;
} 

以上是针对一个下拉框添加 focus 的CSS代码段。该CSS代码利用了伪类选择器 :focus-within，在下拉框获得焦点时，在前面添加一个下箭头，通过相对定位和绝对定位使得它的位置居中在输入框右边。

我们可以把 .drop-down 类应用在下拉框所在的 div 上，并且使用一个 select 元素作为选项的容器。通过应用该CSS代码后，当用户进入该下拉框输入并且获取焦点时，会出现一个下箭头，使得用户可以直接下拉选择项。