加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索
背景:
阅读内容  领跑条码、标签打印软件 | 来电弹出客户资料

自定义select元素的CSS样式

[日期:2013-04-22] 作者: 来源: [字体: ]

大家都知道,如果用CSS来定义select元素样式的话,常常会无效或者不彻底,其实这里有个技巧:使用appearance:none去除select的默认样式,然后再使用gradient、background-size,background-position等样式属性来彻底自定义出个性化的select元素。

效果图:

css代码:

select{

         margin: 0;

         padding: 0;

         outline: none;

         height: 25px;

         line-height: 25px;

         width: 120px;

         border: rgb(191, 204, 220) 1px solid;

         border-radius: 3px;

         display: inline-block;

         font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial";

         background-size: 5px 5px,5px 5px,25px 25px,1px 25px;

         background-color: #fff;

         background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 

         repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 

         linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%), 

         repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%);

         background-repeat: no-repeat;

         background-position: 101px 10px,106px 10px,right top,92px top;

         -webkit-appearance: none

 }

关键词:自定义  select 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (2)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 2 楼
* 匿名 发表于 2016/12/25 12:32:54
http://www.blue1000.com/bkhtml/c117/2014-04/71555.htm 角色体验作文 http://www.135995.com/details/zs803.html 关于窗的作文 http://www.135995.com/details/zs804.html
第 1 楼
* 匿名 发表于 2016/12/24 12:32:50
http://www.blue1000.com/bkhtml/c117/2014-04/71555.htm 报道稿作文 http://www.135995.com/details/zs229.html 足球赛作文 http://www.135995.com/details/zs250.html