html原生控件美化,HTML表单美化
由于一些系統(tǒng)原生的表單控件在各個(gè)瀏覽器中顯示效果不一致，且無法設(shè)置某些關(guān)鍵CSS樣式，為了保證表單在各瀏覽器中的兼容性，表單美化就是不得不做的一件事了
單選按鈕
【實(shí)現(xiàn)效果】
【實(shí)現(xiàn)過程】
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選擇一項(xiàng)游戲方式：
咻一咻
搖一搖
扭一扭
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';
}
}
多選按鈕
【實(shí)現(xiàn)效果】
【實(shí)現(xiàn)過程】
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選擇日常手機(jī)交易方式(可多選)：
支付寶
微信
百度錢包
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');
}
}
}
下拉列表
【實(shí)現(xiàn)效果】
【實(shí)現(xiàn)過程】
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;
}
地址:
朝陽區(qū)
- 朝陽區(qū)
- 海淀區(qū)
- 東城區(qū)
- 西城區(qū)
- 豐臺(tái)區(qū)
- 石景山區(qū)
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');
//簡(jiǎn)單思路
//[1]點(diǎn)擊oDiv時(shí)，默認(rèn)文字為黑色，三角向上，變成文字為#999，三角向下；簡(jiǎn)化為增加一個(gè)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]點(diǎn)擊oUl的li時(shí)，oUl從隱藏變成顯示，文字和三角恢復(fù)到黑色和向上的默認(rèn)樣式；并且文字內(nèi)容變成當(dāng)前點(diǎn)擊的li的內(nèi)容
for(var i = 0,len=aLi.length; i < len;i++){
aLi[i].onclick = function(){
oShow.innerHTML = this.innerHTML + '';
}
}
//[3]點(diǎn)擊box以外的其他部分時(shí)，oUl從隱藏變成顯示，文字和三角恢復(fù)到黑色和向上的默認(rèn)樣式
document.onclick = function(){
this.getElementsByTagName('span')[0].className = 'show-select';
oUl.style.display = 'none';
}
一個(gè)不是計(jì)算機(jī)專業(yè)的理科生，轉(zhuǎn)行學(xué)前端
如果你也有一個(gè)編程夢(mèng)，這是咱們的前端學(xué)習(xí)QQ群：784-783-012
(在線學(xué)習(xí)，8個(gè)月時(shí)間，目前就業(yè)，廣州工作，月薪16k)
總結(jié)
以上是生活随笔為你收集整理的html原生控件美化,HTML表单美化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AutoCAD2014 无法通过快捷方式
- 下一篇： LabVIEW Arduino RS-4