IT工程師數位筆記本

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>

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>

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>