資訊專欄INFORMATION COLUMN
CSS 下拉選擇菜單基本的CSS樣式不怎么好看，通過一些簡單的樣式優(yōu)化，可以得到如下圖這樣的：
html結構如下：
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);
});
這兒只是提供一種方法而已，當然前面文章中已經(jīng)寫過用css3模擬select樣式效果更好。
如果您覺得本文對您的學習有所幫助，請多支持與鼓勵。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111135.html
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：如下就是對象或是如下以下兩者的修改都是等價的但是使用不能很好的操作，所以可以將其轉換成對象把元素轉化成的對象總體，表示當前的上下文對象是一個對象，可以調(diào)用對象所擁有的屬性和方法。代表的上下文對象是一個的上下文對象，可以調(diào)用的方法和屬性值。 一：初識 jquery： 1、 jQuery 只是一個庫，不需要特別的安裝，只需要我們在頁面 標簽內(nèi)中通過 script 標簽腳本引入 jQuer...
閱讀 1882·2021-11-19 09:40
閱讀 2601·2021-08-30 09:46
閱讀 2183·2021-08-03 14:01
閱讀 2654·2019-08-30 10:54
閱讀 1205·2019-08-29 16:38
閱讀 1446·2019-08-29 11:02
閱讀 2542·2019-08-28 18:16
閱讀 1690·2019-08-28 18:09
