用css美化select框

最新推荐文章于 2024-05-24 13:19:01 发布

转载最新推荐文章于 2024-05-24 13:19:01 发布 · 986 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanghanwen/p/10578833.html

本文介绍了如何使用CSS来美化浏览器默认的select选择框，通过示例代码展示具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码：

 1 .selectData{
 2         height: 0.42rem;
 3 
 4         position: absolute;
 5         right:.28rem;
 6         top:.30rem;
 7         //去边框
 8         border: none;
 9         outline: none;
10         //圆角
11         -moz-border-radius:0.5rem;
12         -webkit-border-radius:0.5rem;
13         border-radius:0.5rem;
14 
15         background-color: #003366;
16         select{
17           border: none;
18           outline: none;
19           line-height: 0.40rem;
20           //通过padding-left的值让文字居中
21           padding-left:0.1rem;
22           background: none;
23           color: #ffffff;
24          
25           font-style: normal;
26           font-weight:bold;
27         }
28         option{
29           border: none;
30           outline: none;
31           background-color: #003366;
32           color: #ffffff;
33           font-weight:bold;
34         }
35       }

View Code

思想就是

转载于:https://www.cnblogs.com/yanghanwen/p/10578833.html