Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use CSS to modify the selection box style, the article is very detailed, has a certain reference value, interested friends must read it!

How to modify the selection box style

The selection box is an essential part of making a form, and you can also drop down to add selections and customize the form.

With CSS customization, you can set various styles to the selection box.

In addition, the default value is the drop-down menu, but you can use the size property to specify the number of rows displayed for the option. The options in the selection box are specified using labels.

Let's look at the specific code.

HTML

Please select a specific location

Hefei

Nanjing

Wuhu Lake

Shanghai

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

}

The above is all the contents of the article "how to modify the selection box style with CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.