Introduction to using css to change the default style of the drop-down list select box

This article uses css to changeDrop-down listIntroduction to the default style of the select box

Principle

The principle is to clear the browser's default drop-down box style and then apply it Upload your own and attach a picture of a small arrow aligned to the right. Of course, the small arrow on the right can be implemented using pseudo elements before or after.

select {  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("arrow.png") no-repeat right center;
  padding-right: 14px;
}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }

Compatibility issue

IE8/9 does not support appearance:none CSSAttribute, so if we need to be compatible with lower versions of IE browser, we need to add a parent container for it. The container is used to cover the small arrow, and then add a rightward direction to the select The small offset or width is larger than the parent element. Set the parent's CSS property to invisible beyond the area to cover the small arrow. Then add a background image or pseudo-element to the parent container to implement a custom arrow.

html code:

<div id="parentDiv">
  <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
  </select></div>

css code:

#parentDiv {
    background: url('ico.png') no-repeat right center;
    width: 80px;
    height: 34px;
    overflow: hidden;
}#parentDiv select {
    background: transparent;
    border: none;
    padding-left: 10px;
    width: 100px;
    height: 100%;
}

Defects

The width of the drop-down option will be wider than its parent container, which looks a bit uncoordinated , it depends on your own choice and the compatibility of the project.

The above is the detailed content of Introduction to using css to change the default style of the drop-down list select box. For more information, please follow other related articles on the PHP Chinese website!