How to modify the select box style using CSS

It is easy to set various styles for text and text areas, but it may not be so easy to set styles for selection boxes, check boxes, etc. This article will introduce to you how to use CSS to modify the selection box. style.

How to modify the selection box style

The selection box is an essential part of making a form. It can also be pulled down to add selections and customize the form.

Through CSS customization, you can set various styles for the selection box.

Also, the default value is a drop-down menu, but you can use the size attribute to specify the number of rows for the option to display. Options in a selection box are specified using the tag.

Let’s take a look at the specific code

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;
}

The effect displayed on the browser As follows:

This article ends here. For more related exciting content, you can pay attention to the CSS Video Tutorial column of the php Chinese website! ! !

The above is the detailed content of How to modify the select box style using CSS. For more information, please follow other related articles on the PHP Chinese website!