いくつかのシステムなので、ネイティブのフォームコントロールは、各ブラウザでの一貫性のない結果を示し、各ブラウザでの互換性を確保するために、いくつかの重要な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;
}
<div class="box" id="box">https://demo.xiaohuochai.site
选择一项游戏方式:
<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>
チェックボックス
[]の結果を達成
[実装]
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
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;
}
<div class="box" id="box">https://demo.xiaohuochai.site
选择日常手机交易方式(可多选):
<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>
ドロップダウンリスト
[]の結果を達成
[実装]
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>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)