自定义下拉框样式

2020-02-24  本文已影响0人  Hsugar
select {
  /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  border: solid 1px #000;
 
  /*很关键:将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  /*在选择框的最右侧中间显示小箭头图片*/
  /* background: url("//cdn.lexue.com/brandsite_v2/img/select_arrow.png") no-repeat scroll right center transparent; */
  /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  padding-right: 14px;
}
 
.icon-down{
  display: inline-block;
  width:30px;
  height:16px;
  background: url("//cdn.lexue.com/brandsite_v2/img/select_arrow.png") no-repeat scroll right center transparent;
  /* background: url("../image/newWap/wapIcons.png") -168px -96px no-repeat; */
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #60C7DC;
  font-size: 15px;
}
上一篇 下一篇

猜你喜欢

热点阅读