前面的話

　　由于一些系統原生的表單控件在各個瀏覽器中顯示效果不一致，且無法設置某些關鍵CSS樣式，為了保證表單在各瀏覽器中的兼容性，表單美化就是不得不做的一件事了

?

單選按鈕

【實現效果】

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/html/beauty/b1.html" frameborder="0" width="320" height="240">

【實現過程】

body{margin: 0;font: 16px/20px "宋體"; } .box{width: 500px;height: 100px;line-height: 100px;margin: 0 auto;border: 1px solid black;text-align: center; } .box label{position:relative;padding-left: 20px; } .box input{visibility: hidden; } .box i{position: absolute;top: -2px;left: -2px;height: 19px;width: 19px;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/radiobutton.gif') no-repeat -14px -18px; } .box label:hover{color: red; } .box label:hover i{background-position: -14px -118px; } .box label.selected i{background-position: -14px -218px; } <div class="box" id="box">選擇一項游戲方式：<label for="xiu"><i></i>咻一咻</label><input id="xiu" type="radio" value="咻一咻"><label for="yao"><i></i>搖一搖</label><input id="yao" type="radio" value="搖一搖"><label for="niu"><i></i>扭一扭</label><input id="niu" type="radio" value="扭一扭"> </div> <script> var oBox = document.getElementById('box'); var aLabel = oBox.getElementsByTagName('label'); for(var i = 0, leni = aLabel.length; i < leni; i ){aLabel[i].onclick = function(){for(var j = 0,lenj = aLabel.length; j < lenj; j ){aLabel[j].removeAttribute('class');}this.className = 'selected';} } </script>

?

多選按鈕

【實現效果】

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/html/beauty/b2.html" frameborder="0" width="320" height="240">

【實現過程】

body{margin: 0;font: 16px/20px "宋體"; } .box{width: 600px;height: 100px;line-height: 100px;margin: 0 auto;border: 1px solid black;text-align: center; } .box label{position:relative;padding-left: 20px; } .box input{visibility: hidden; } .box i{position: absolute;top: -2px;left: -2px;height: 19px;width: 19px;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/checkbox.gif') no-repeat -14px -18px; } .box label:hover{color: red; } .box label:hover i{background-position: -14px -118px; } .box label.selected i{background-position: -14px -218px; } <div class="box" id="box">選擇日常手機交易方式(可多選)：<label for="a"><i></i>支付寶</label><input id="a" type="radio" value="支付寶"><label for="t"><i></i>微信</label><input id="t" type="radio" value="微信"><label for="b"><i></i>百度錢包</label><input id="b" type="radio" value="百度錢包"> </div> <script> var oBox = document.getElementById('box'); var aLabel = oBox.getElementsByTagName('label'); for(var i = 0, leni = aLabel.length; i < leni; i ){aLabel[i].onclick = function(){if(!this.className){this.className = 'selected';}else{this.removeAttribute('class');}} } </script>

?

下拉列表

【實現效果】

style="width: 100%; height: 230px;" src="https://demo.xiaohuochai.site/html/beauty/b3.html" frameborder="0" width="320" height="240">

【實現過程】

body{margin: 0;font: 16px/20px "宋體"; } ul{margin: 0;padding: 0;list-style: none; } .box{width: 300px;height: 40px;margin: 0 auto;border: 1px solid black; } .box .show{background-color: red;line-height: 30px;padding: 5px; } .box .show-area{color: white;vertical-align: middle; } .box .show-select{position: relative;display: inline-block;vertical-align: middle;width: 200px;height: 28px;border: 1px solid #999;background-color: white;text-indent: 20px;cursor: pointer; } .box .show-selectAdd{color: #999; } .box .show-select i{position: absolute;height: 0;width: 0;top: 0;right: 0;margin-top: 12px;margin-right: 5px;border: 5px solid transparent;border-top-color: black; } .box .show-selectAdd i{border: 5px solid transparent;border-bottom-color: black;margin-top: 8px; } .box .list{border: 1px solid #dfdfdf;border-top: none;display: none; } .box .list-in{height: 30px;line-height: 30px;text-indent: 74px;border-bottom: 1px solid #dfdfdf; cursor: pointer; } .box .list-in:hover{color: red; } <div class="box" id="box"><div class="show"><strong class="show-area">地址:</strong><span class="show-select">朝陽區<i></i></span></div><ul class="list"><li class="list-in">朝陽區</li><li class="list-in">海淀區</li><li class="list-in">東城區</li><li class="list-in">西城區</li><li class="list-in">豐臺區</li><li class="list-in">石景山區</li></ul> </div> <script> var oBox = document.getElementById('box'); var oDiv = oBox.getElementsByTagName('div')[0]; var oShow = oDiv.getElementsByTagName('span')[0]; var oUl = oBox.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); //簡單思路 //[1]點擊oDiv時，默認文字為黑色，三角向上，變成文字為#999，三角向下；簡化為增加一個show-selectAdd類名；oUl從隱藏變成顯示 oDiv.onclick = function(e){//阻止冒泡 e = e || event;if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}oShow.className = 'show-select show-selectAdd';oUl.style.display = 'block'; } //[2]點擊oUl的li時，oUl從隱藏變成顯示，文字和三角恢復到黑色和向上的默認樣式；并且文字內容變成當前點擊的li的內容 for(var i = 0,len=aLi.length; i < len;i ){aLi[i].onclick = function(){oShow.innerHTML = this.innerHTML '<i></i>';} } //[3]點擊box以外的其他部分時，oUl從隱藏變成顯示，文字和三角恢復到黑色和向上的默認樣式 document.onclick = function(){this.getElementsByTagName('span')[0].className = 'show-select';oUl.style.display = 'none'; } </script>
更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。