首页 > 代码库 > 【css2、css3】css改变select选择框的样式
【css2、css3】css改变select选择框的样式
效果：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style type="text/css"> 7 /* 去掉默认样式，设置新的样式 */ 8 .select-style{ 9 position: relative;10 display: inline-block;11 }12 .select-style select{13 display:inline-block;14 box-sizing:border-box;15 background:none;16 border:1px solid #222;17 outline:none;18 -webkit-appearance:none;19 padding:5px 15px 5px 5px;20 line-height:inherit;21 color:inherit;22 cursor:pointer;23 font-size:14px;24 position:relative;25 z-index:3;26 height:100%;27 border-radius:2px;28 }29 .select-style:after{30 content:‘*‘;31 color:red;32 position:absolute;33 top: 0;34 bottom:0;35 right:5px;36 height:100%;37 padding:5px 0;38 }39 .select-style select option{40 color:#222;41 }42 .select-style select option:hover{43 background:#535353;44 color:#fff;45 }46 .select-style select option:checked{47 background:#535353;48 color:#fff;49 }50 </style>51 </head>52 <body>53 <!-- html 布局 -->54 <span class="select-style">55 <select>56 <option>option 1</option>57 <option>option 2</option>58 <option>option 3</option>59 <option>option 4</option>60 <option>option 5</option>61 </select>62 </span>63 </body>64 </html>
【css2、css3】css改变select选择框的样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。