前言：
都說程序員有三寶：人傻，錢多，死得早。博主身邊的程序“猿”一大半應了這三寶，這從側面說明了一個問題，只有理性是過不好日子的。朋友們應該把工作與生活分開，讓生活變得感性，讓工作變得理性，兩者相提並行，豈不快哉。咳，話題扯得有點遠，今天博主給大家寫一篇關於css如何設置select、radio 、 checkbox 、file樣式的問題，這里不涉及模擬框，僅介紹原生情況下如何做到自定義樣式，廢話不多說，賴次夠！
1.select與input file：
相信大家都遇到過這樣的問題，大多數瀏覽器select選擇框不能被直接修改樣式，實在是不夠美觀，先看一下代碼：
<style type="text/css"> #box{ width: 500px; margin: 50px auto;} #box select{ width: 200px; height: 30px; border: 1px solid red;background: green;color: #ffffff;} </style> <div id="box"> <select name="xuanxiang"> <option value="">選項一</option> <option value="">選項二</option> <option value="">選項三</option> </select> </div>
這里把select設置成寬度200px，高度30px，邊框紅色，背景綠色，文字白色；
咱們來看看各大瀏覽器的顯示效果；
博主的win10系統鬧小情緒了，ie打不開 將就一下，總之我們可以看到，它最大的問題是右邊的箭頭，各有特色，另外彈出的框樣式也各不相同。
怎么樣屏蔽瀏覽器自帶的效果呢，樓主有一個小技巧教給大家，支持ie8及以上的瀏覽器。（e6是什么？可以吃嗎？）。
利用css中的“七層重疊法”，即網頁內容先后順序分別為：背景邊框 ， 負值z-index ， display:block , 浮動 , display:inline-block , z-index:auto , 正值z-index，
越往后在網頁中的層級越靠前，也就是說如果一個z-index值為1或者更高的話 它會遮擋掉他之前的所有元素。
利用這個法則以及opacity設置透明度，可以模擬一個樣式，這個樣式是自定義的。看下面的代碼
<style type="text/css"> #box{ width: 500px; margin: 50px auto; position: relative; } #box select{ width: 200px; height: 30px; position: relative; z-index: 1; opacity: 0; } .selectbg{position: absolute; left: 0;top: 0; width: 200px; height: 30px; border: 1px solid red;background: green;color: #ffffff; z-index: -1; line-height: 28px;text-indent: 10px; } </style> <div id="box"> <select name="xuanxiang"> <option value="">選項一</option> <option value="">選項二</option> <option value="">選項三</option> </select> <div class="selectbg">選項一</div> </div>
注意的幾個技巧：
① select透明度設置成0，而z-index是1。
② div被定位在box的左上角而select默認位置就是左上角 所以他們發生了重疊，因為select的透明度是0，它是被隱藏了，但實際上它是在最上層的；
看看這么做的效果：
nice 幾款瀏覽器顯示一致。此刻顯示的是class名為selectbg的div層，而點擊的則還是select；
這段代碼還有幾個問題，選擇后怎么使div文字跟隨改變？
改進一下上面的代碼，這里需要用到一點兒js代碼了：
<style type="text/css"> #box{ width: 200px;height: 30px; margin: 50px auto; position: relative; } #box select{ width: 100%; height: 100%;position: absolute; left: 0;top: 0; z-index: 1; opacity: 0; } .selectbg{position: absolute; left: 0;top: 0; width: 100%; height: 100%; border: 1px solid red;background: green;color: #ffffff; z-index: -1; line-height: 28px;text-indent: 10px; } #box select option{ font-size: 12px; text-align: center; color: #666666; padding: 5px;} </style> <div id="box"> <select name="xuanxiang"> <option value="">選項一</option> <option value="">選項二</option> <option value="">選項三</option> </select> <div class="selectbg">選項一</div> </div> <script type="text/javascript"> var oSelect = function(){ $("select").on("change",function(){ $(this).next(".selectbg").html($(this).find("option:selected").text()); //$(this).find("option:selected").text() 意為獲取select選中的值 設置給selectbg }); } oSelect(); </script>
首先，將select也設置為絕對定位，box則接管背景與select的高寬設置；然后給select完成了它應該有的功能；
順便設置了下option的樣式，但是這個設置在谷歌中沒有並沒有想要的結果。聊勝於無吧。
總結select：
你可以任意修改select的面板部分樣式，這是一個好消息。但是option部分，無法修改。但option部分一般不那么重要，在移動端原生甚至體驗會更好；
input file
依舊是根據上一個思路，文件上傳框可以變得更直白美觀；上代碼:
<style type="text/css"> *{ padding: 0; margin: 0;} .fileloding{ position: absolute; opacity: 1; width: 0%;transition: opacity 500ms;-webkit-transition: opacity 500ms;-ms-transition: opacity 500ms;-moz-transition: opacity 500ms;-o-transition: opacity 500ms; bottom: -15px; height: 15px; background:#90C0F5 ;} .uploadbox{ width: 150px;height: 150px; position: relative; margin: 100px;} .uploadbox input[type=file]{ cursor: pointer; position: absolute; width: 100%; height: 100%; z-index: 2; opacity: 0; filter: alpha(opacity=0);}/*設置file框在最上層*/ .uploadbox .uploadbox-bg{ display: block; width: 100%; height: 100%; position: absolute; z-index: 1; background: #dfdfdf; border: 1px solid #cccccc; }/*設置模擬樣式*/ .uploadbox .uploadbox-bg p{font-size: 80px; color: #999999;text-align: center;} .uploadbox .uploadbox-bg span{ display: block; width: 100%; text-align: center; line-height: 15px; font-size: 14px; color: #666666;} .uploadbox:hover .uploadbox-bg p,.uploadbox:hover .uploadbox-bg span{ color: #90C0F5;} </style> <body> <div class="uploadbox"> <input type="file" id="uploadbox" value="上傳" /> <input type="hidden" name="filepath" id="filepath" value="" /> <div class="uploadbox-bg"> <p>+</p> <span>點擊上傳</span> </div> </div> </body>
一個不難看的圖片上傳；
原理相同，有興趣的同學拿下去測試；
2.radio與：checkbox
網頁中還有哪幾個不能修改的？
還要radio和checkbox 單選與復選框；如果你用上面的方法，它一樣可以被模擬，只是，它還有一個label標簽可以做做文章，將它寫到label標簽中，點擊label域則會選中它；
</style> <style type="text/css"> #box{ position: relative; } #box label input{ position: absolute; left: 0; top: 0; z-index: -1; } .rediobg{ background: #ffffff;} #box label.active .rediobg{ background: red;} </style> <div id="box"> <label> <input type="checkbox" name="" id="" value="" /> <div class="rediobg"> 點個贊唄 </div> </label> </div> <script type="text/javascript"> $("label").on("click",function(){ //點擊label var _in = $(this).children("input"); if(_in[0].checked){ //判斷當前的checkbox 如果選中則給當前label添加一個classname $(this).addClass("active"); }else{ //如果沒選中則移除 $(this).removeClass("active"); } }); </script>
需要判斷checkbox的選中狀態，然后改變div的樣式；
效果出來了 nice；
3.總結
寫到這里，博文結束了。但是學習的路永遠都走不到盡頭，希望大家一起共同學習，探討，有任何疑問在評論區回復即可； 夜深了，博主也是困得要緊，睡覺去也。
---------------------------------------我最嫉妒別人的是：他比我學的快---------------------------------------
我的微信號：
qq：
歡迎各種技術討論，如果您有建站需求，歡迎聯系；
(轉載請注明出處)