您的位置 首页 css教程

如何使用CSS修改选择框样式

对于文字和文本区域很容易设置各种样式,但是对于选择框、复选框等样式的设置可能就不会那么容易了,本篇文章就来给大家介绍一下如何使用CSS修改选择框样式。

如何修改选择框样式

选择框是制作表单必不可少的一部分,还可以下拉以添加选择并自定义表单。

通过CSS自定义,你可以对选择框进行各种样式的设置。

此外,默认值是下拉菜单,但您可以使用size属性指定选项的显示行数。选择框中的选项使用<OPTION>标签来指定。

我们来看具体的代码

HTML

<div class="cp_ipselect cp_sl04">  <select required>    <option value="" hidden>请选择具体位置</option>    <option value="1">合肥</option>    <option value="2">南京</option>    <option value="3">芜湖</option>    <option value="4">上海</option>  </select></div>

CSS

.cp_ipselect {  overflow: hidden;  width: 90%;  margin: 2em auto;  text-align: center;}.cp_ipselect select {  width: 100%;  padding-right: 1em;  cursor: pointer;  text-indent: 0.01px;  text-overflow: ellipsis;  border: none;  outline: none;  background: transparent;  background-image: none;  box-shadow: none;  -webkit-appearance: none;  appearance: none;}.cp_ipselect select::-ms-expand {  display: none;}.cp_ipselect.cp_sl04 {  position: relative;  border-radius: 2px;  border: 2px solid #da3c41;  border-radius: 50px;  background: #ffffff;}.cp_ipselect.cp_sl04::before {  position: absolute;  top: 0.8em;  right: 0.8em;  width: 0;  height: 0;  padding: 0;  content: '';  border-left: 6px solid transparent;  border-right: 6px solid transparent;  border-top: 6px solid #da3c41;  pointer-events: none;}.cp_ipselect.cp_sl04 select {  padding: 8px 38px 8px 8px;  color: #da3c41;}

在浏览器上显示的效果如下:

2345截图20181126135145.png

本篇文章到这里就全部结束了,更多相关精彩内容大家可以关注php中文网的CSS视频教程栏目!!!

以上就是如何使用CSS修改选择框样式的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:如何使用CSS修改选择框样式

文章地址:https://www.pyhw.net/40277_%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8css%e4%bf%ae%e6%94%b9%e9%80%89%e6%8b%a9%e6%a1%86%e6%a0%b7%e5%bc%8f.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图