星空网 > 软件开发 > 网页设计

CSS select样式优化 含jquery代码

CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的:
CSS select样式优化 含jquery代码

html结构如下:

<div class="sel_wrap">  <label>请选择您所在的城市</label>  <select class="select" name="" id="c_city">    <option value="0">请选择您所在的城市</option>    <option value="1">中山市</option>    <option value="2">太原市</option>    <option value="3">广州市</option>  </select></div>

 

css样式:

.sel_wrap{height:40px;background:#fff url(img/icons.png) no-repeat right -24px;color: #a1a1a1; font-size: 16px;border:1px solid #E4E4E4;cursor:pointer;position:relative;_filter:alpha(opacity=0);}.sel_wrap label{padding-left:10px;font-size:16px;z-index:2; color: #a1a1a1; line-height: 40px; height: 40px; display: block;}.sel_wrap .select{width:100%; height:40px; line-height:40px; z-index:4;position:absolute;top:0;left:0;margin:0;padding:0;opacity:0; *margin-top:12px; filter:alpha(opacity=0);cursor:pointer; font-size: 16px;}

 

jquery代码:

$(".sel_wrap").on("change", function() {  var o;  var opt = $(this).find('option');  opt.each(function(i) {    if (opt[i].selected == true) {      o = opt[i].innerHTML;    }  })  $(this).find('label').html(o);});

这儿只是提供一种方法而已,当然前面文章中已经写过用css3模拟select样式效果更好。

 




原标题:CSS select样式优化 含jquery代码

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

联合利华收购DTC护发品牌K18:https://www.kjdsnews.com/a/1697264.html
Meesho下载量印度第一,2023年吸引超1.4亿消费者:https://www.kjdsnews.com/a/1697265.html
马斯克旗下X平台将于2024年推出支付功能:https://www.kjdsnews.com/a/1697266.html
卖家数量突破140万!亚马逊持续加码印度市场!:https://www.kjdsnews.com/a/1698234.html
Tiktok玩家第112篇:美区红利到底在哪?--和大卖交流后的思考:https://www.kjdsnews.com/a/1698235.html
SHEIN、TEMU引领全球空运量,航空货运最糟糕时期已过去?:https://www.kjdsnews.com/a/1698236.html
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流