CSS下拉框是网页设计中经常使用的一个元素,它可以让用户通过点击下拉框选择不同的选项。下面我们将简单介绍如何设置一个CSS下拉框。/* CSS样式 */ .select-box { width: 20
CSS下拉框是网页设计中经常使用的一个元素,它可以让用户通过点击下拉框选择不同的选项。下面我们将简单介绍如何设置一个CSS下拉框。
/* CSS样式 */ .select-box { width: 200px; position: relative; } .select-box select { padding: 8px 15px; width: 100%; border: none; box-shadow: none; background-color: #e9e9e9; -webkit-appearance: none; /* 去掉默认样式 */ -moz-appearance: none; appearance: none; position: relative; } .select-box:after { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; /* 添加字体图标 */ content: "f078"; /* 上箭头 */ } .select-box:before { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; content: "f077"; /* 下箭头 */ } .select-box select::-ms-expand { display: none; /* 去掉IE默认下拉箭头 */ }
首先,我们需要在HTML中创建一个标签,并添加对应的选项,如下所示:
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> </select>
接着,在CSS中,我们给包裹标签的标签设置一个相对定位的position,并设置标签的样式:
.select-box { width: 200px; position: relative; } .select-box select { padding: 8px 15px; width: 100%; border: none; box-shadow: none; background-color: #e9e9e9; -webkit-appearance: none; /* 去掉默认样式 */ -moz-appearance: none; appearance: none; /* 去掉默认样式 */ position: relative; }
接下来,我们需要添加一个上箭头的字体图标,以及一个下箭头的字体图标,并把它们分别放在标签的前后位置:
.select-box:after { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; /* 添加字体图标 */ content: "f078"; /* 上箭头 */ } .select-box:before { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; content: "f077"; /* 下箭头 */ }
最后,我们还需要去掉IE浏览器默认的下拉箭头:
.select-box select::-ms-expand { display: none; /* 去掉IE默认下拉箭头 */ }
到这里,CSS下拉框的设置就完成了。当用户点击下拉框时,会出现选项供用户选择,并且在选择后会自动关闭。如果想要实现下拉框不自动关闭,可以使用JavaScript来实现。
粉丝
0
关注
0
收藏
0