圆角select下拉菜单

最新推荐文章于 2025-05-30 17:01:19 发布

转载最新推荐文章于 2025-05-30 17:01:19 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/561601

文章标签：

#移动开发

分享一段代码实例，它实现了圆角效果的select下拉菜单。

代码实例如下:

       <!doctype html>
      
       <
       html
       > 
      
       <
       head
       > 
      
       <
       meta 
       charset
       =
       "utf-8"
       > 
      
       <
       meta 
       name
       =
       "author" 
       content
       =
       "http://www.softwhy.com/" 
       /> 
      
       <
       title
       >蚂蚁部落</
       title
       > 
      
       <
       style
       > 
      
       select{
      
       border:1px solid #c9c9c9; 
      
       background-color:#fff; 
      
       color:#666; 
      
       height:28px; 
      
       line-height:28px; 
      
       padding:4px 6px; 
      
       font-size:14px; 
      
       border-radius:4px; 
      
       cursor:pointer; 
      
       outline:none; 
      
       }
      
       </
       style
       > 
      
       </
       head
       > 
      
       <
       body
       > 
      
       <
       select 
       id
       =
       "antzone"
       > 
      
       <
       option 
       value
       =
       "1"
       >蚂蚁部落一</
       option
       >         
      
       <
       option 
       value
       =
       "2"
       >蚂蚁部落二</
       option
       >         
      
       </
       select
       > 
      
       </
       body
       > 
      
       </
       html
       >