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

單選按鈕

【實現效果】

【實現過程】

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('https://demo.xiaohuochai.site/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;

}

https://demo.xiaohuochai.site

選擇一項游戲方式：

咻一咻

搖一搖

扭一扭

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';

}

}

多選按鈕

【實現效果】

【實現過程】

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('https://demo.xiaohuochai.site/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;

}

https://demo.xiaohuochai.site

選擇日常手機交易方式(可多選)：

支付寶

微信

百度錢包

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');

}

}

}

下拉列表

【實現效果】

【實現過程】

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;

}

地址:

朝陽區

• 朝陽區
• 海淀區
• 東城區
• 西城區
• 豐臺區
• 石景山區

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 + '';

}

}

//[3]點擊box以外的其他部分時，oUl從隱藏變成顯示，文字和三角恢復到黑色和向上的默認樣式

document.onclick = function(){

this.getElementsByTagName('span')[0].className = 'show-select';

oUl.style.display = 'none';

}

一個不是計算機專業的理科生，轉行學前端

如果你也有一個編程夢，這是咱們的前端學習QQ群：784-783-012

(在線學習，8個月時間，目前就業，廣州工作，月薪16k)

總結

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

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