How to beautify select with pure css
This article mainly introduces "how to use pure css to beautify select". In daily operation, I believe many people have doubts about how to use pure css to beautify select. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to use pure css to beautify select". Next, please follow the editor to study!
CarsSelect
Volvo
Saab
Opel
Audi
Body {
Font-size:20px
Color:#090
Background-color:#eee
Text-align:center
}
.select {
Display:inline-block
Width:300px
Position:relative
Vertical-align:middle
Padding:0
Overflow:hidden
Background-color:#fff
Color:#555
Border:1pxsolid#aaa
Text-shadow:none
Border-radius:4px
Transition:box-shadow0.25sease
Z-index:2
}
.select: hover {
Box-shadow:01px4pxrgba (00.15)
}
.select: before {
Content: ""
Position:absolute
Width:0
Height:0
Border:10pxsolidtransparent
Border-top-color:#ccc
Top:14px
Right:10px
Cursor:pointer
Z-index:-2
}
.selectselect {
Cursor:pointer
Padding:10px
Width:100%
Border:none
Background:transparent
Background-image:none
-webkit-appearance:none
-moz-appearance:none
}
.selectselect: focus {
Outline:none
}
At this point, the study on "how to use pure css to beautify select" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
