CSS 下拉框有多种设置,其中添加 focus 能够使得用户使用更加便利。下面是一个添加 focus 的CSS 下拉框的实例:CSS代码: .drop-down { position: relativ
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代码后,当用户进入该下拉框输入并且获取焦点时,会出现一个下箭头,使得用户可以直接下拉选择项。
粉丝
0
关注
0
收藏
0