欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

怎么用CSS修改选择框样式

企业模板

  怎么样修改选择框样式

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

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

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

  大家来看具体的代码

  HTML

  <pclass="cp_ipselectcp_sl04">

  <selectrequired>

  <optionvalue=""hidden>请选择具体地方</option>

  <optionvalue="1">合肥</option>

  <optionvalue="2">南京</option>

  <optionvalue="3">芜湖</option>

  <optionvalue="4">上海</option>

  </select>

  </p>

  CSS

  

  

  

  .cp_ipselect{

  overflow:hidden;

  width:90%;

  margin:2emauto;

  text-align:center;

  }

  .cp_ipselectselect{

  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_ipselectselect::-ms-expand{

  display:none;

  }

  .cp_ipselect.cp_sl04{

  position:relative;

  border-radius:2px;

  border:2pxsolid#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:6pxsolidtransparent;

  border-right:6pxsolidtransparent;

  border-TOP:6pxsolid#da3c41;

  pointer-events:none;

  }

  .cp_ipselect.cp_sl04select{

  padding:8px38px8px8px;

  color:#da3c41;

  }



本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.srgoc.cn 关注: 时间:2022-05-10 10:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14141.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧