在该笔记中将学到一些常用的表单美化的方法与展示效果
单选按钮美化
在表单中，原本单选按钮的实现方法是 form + input( type=”radio”) + lable 来实现的，这样在点击该单选按钮的时候，该元素自带的 CSS 动作就可以添加到按钮上。
但是，如果需要对单选按钮被点击的效果进行美化，比如去掉单选按钮之前的小圆点，更好的方法是放弃使用 input(type=”radio”)，而是使用 dl + dt + dd(或者使用 ul + li 和 ol + li ) 来实现。这样更加方便添加需要的 CSS 效果。
<html>
<head>
<title>单选按钮的美化</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body{
font-size: 12px;
}
.type {
width: 400px;
height: 32px;
margin: 30px auto;
border: 1px solid #DFDFDF;
}
.type dl{
margin-left: 15px;
height: 32px;
line-height: 32px;
}
.type dd{
float: left;
margin: 0 10px 0 8px;
}
.type dt{
float: left;
}
.type dd a{
text-decoration: none;
color: black;
margin-left: 5px;
}
.type dd a:hover{
color: #CC0000;
text-decoration: underline;
}
.type dd a:hover i,.type .selected i{
background-position:-1px -108px;
}
.type dd i{
display: inline-block;
width: 12px;
height: 10px;
float: left;
margin-top: 10px;
border: 1px solid #DFDFDF;
background: url("http://ofjjubwp5.bkt.clouddn.com/image/png/img29.png") no-repeat;
background-position: 0 -7px;
}
</style>
</head>
<body>
<div class="type">
<!--<form action="#" method="POST" name="formType">
<label>配送类型：</label>
<input type="radio" name="type" checked><label>全部</label>
<input type="radio" name="type"><label>京东配送</label>
<input type="radio" name="type"><label>第三方配送</label>
</form>-->
<dl id="sendType">
<dt >配送类型：</dt>
<dd class="selected" onclick="show(0)"><a href="#"><i></i>全部</a></dd>
<dd onclick="show(1)"><a href="#"><i></i>京东配送</a></dd>
<dd onclick="show(2)"><a href="#"><i></i>第三方配送</a></dd>
</dl>
</div>
<script>
function show(index){
var dd = document.getElementById("sendType").getElementsByTagName("dd"),
len, i;
for(i=0, len=dd.length; i<len; i++){
if(i === index) {
dd[i].className = "selected";
} else{
dd[i].className = null;
}
}
}
</script>
</body>
</html>
显示效果为：
复选按钮的美化
因为不同浏览器对复选框的默认样式都不一样，所以如果想要使得所有的浏览器对复选框的显示效果都相同，则使用图片等元素来替代复选框的默认样式。
可以对 input 元素设置 display:none 来删除表单元素的默认显示效果。
<html>
<head>
<title>多选按钮美化</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
}
.typeList{
width: 370px;
height: 30px;
margin: 50px auto;
border: 1px solid #DFDFDF;
border-width: 1px 0px;
}
.typeList ul {
list-style: none;
height: 30px;
line-height:30px;
text-align: center;
padding-left: 20px;
}
.typeList ul li {
float: left;
margin-right: 20px;
}
.typeList ul li:hover i,.typeList ul li.selected i{
background-position:-1px -108px;
}
.typeList ul li input {
display: none;
}
.typeList ul li i{
background: url("http://ofjjubwp5.bkt.clouddn.com/image/png/img29.png") no-repeat;
display: inline-block;
width: 12px;
height: 10px;
border: 1px solid #DFDFDF;
background-position: 0 -7px;
float: left;
margin: 10px 2px 0 0;
}
</style>
</head>
<body>
<div class="typeList">
<form action="#" method="POST" name="typeList">
<ul id="checkedList">
<li class="selected"><input type="checkbox" name="typeList" id="bao"/><i></i><label for="bao">包邮</label></li>
<li><input type="checkbox" name="typeList" id="xiao"/><i></i><label for="xiao">消费者保障</label></li>
<li><input type="checkbox" name="typeList" id="huo"/><i></i><label for="huo">货到付款</label></li>
<li><input type="checkbox" name="typeList" id="hai"/><i></i><label for="hai">海外商品</label></li>
</ul>
</form>
</div>
<script>
window.onload = function(){
var lis = document.getElementById("checkedList").getElementsByTagName("li"),
i, len;
for(i=0, len = lis.length; i<len; i++) {
lis[i].onclick = function() {
if(this.className == "selected") {
console.log( "not selected");
this.className = null;
} else {
console.log("selected");
this.className = "selected";
}
}
}
}
</script>
</body>
</html>
小bug：如果鼠标点击在文字上的时候，li 会被判定为点击了两次(一次是点击 li ，另一次是出发 lable 点击了 input，此时勾选的显示效果就会变成：勾选->不勾选)
显示效果为：
文本框的美化
文本框 input[type-text] 的美化，可以使用 placeholder 来替换 value 属性，从而达到提示是灰色，当有输入的时候，提示的文字不显示的效果。
也可以在文本框中调用 CSS3 的 transition 属性，设置属性的过度，使得当文本框获得焦点的时候，显示效果有过渡的改变。
<html>
<head>
<title>text</title>
<meta charset="uft-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
width: 700px;
height: auto;
background-color: #F6F6F6;
padding: 10px;
margin: 40px auto;
}
.content *:focus{
outline: none;
}
.content ul {
list-style: none;
}
.content ul li{
font-size: 14px;
margin-left: 20px;
border-bottom: 1px solid #DFDFDF;
padding: 12px;
}
.content ul li label{
width: 100px;
display: inline-block;
float: left;
}
.content ul li input[type=text]{
padding: 3px 8px;
height: 20px;
width: 220px;
border: 1px solid green;
border-radius: 4px;
}
.content ul li input:focus{
border: 1px solid red;
}
.content ul li input[type=text]{
transition: width .25s;
-moz-transition: width .25s; /* Firefox 4 */
-webkit-transition: width .25s; /* Safari 和 Chrome */
-o-transition: width .25s; /* Opera */
}
.content ul li input:focus{
width: 250px;
}
</style>
</head>
<body>
<div class="content">
<form action="#" method="POST">
<ul>
<li>
<label for="name">姓名:</label>
<input type="text" name="yourname" placeholder="姓名" id="name">
</li>
<li>
<label for="name2">姓名:</label>
<input type="text" name="yourname" placeholder="姓名" id="name2">
</li>
</ul>
</form>
</div>
</body>
</html>
显示效果如下：
下拉列表的美化
原来自带的下拉列表是 select ，但是由于 select 带有的浏览器自定义渲染格式，使得对下拉列表的美化比较困难，所以使用 ul + li 来构造下拉列表：
<html>
<head>
<title>select 演示</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font: 13px/24px "微软雅黑";
background-color: #333;
}
#box{
width: 500px;
height: 326px;
position: absolute;
left: 50%;
top:50%;
background-color: white;
margin: -163px 0 0 -250px;
}
.province{
width: 320px;
height: 42px;
background-color:#C00;
margin: 80px auto;
}
.province strong{
color: white;
width: 64px;
height: 42px;
line-height: 42px;
text-align: center;
display: inline-block;
font-weight: normal;
float: left;
}
.province #selectProvince{
width: 200px;
height: 28px;
display: block;
background-color: white;
margin-top: 7px;
float: left;
padding-left: 8px;
color: #CCC;
cursor: pointer;
}
#allprovince{
width: 318px;
height: auto;
border: 1px solid #DFDFDF;
clear: both;
list-style: none;
line-height: 30px;
}
#allprovince li{
height: 30px;
border-bottom: 1px solid #DFDFDF;
cursor: pointer;
}
#allprovince li b{
display: inline-block;
width: 40px;
font-size: bold;
text-align: center;
}
#allprovince li span{
font-weight: bold;
}
#allprovince li span:hover{
color: #C00;
}
</style>
</head>
<body>
<div id="box">
<div class="province">
<strong>送货至：</strong>
<span id="selectProvince">北京</span>
<ul id="allprovince">
<li><b>A</b><span>安徽</span></li>
<li><b>B</b><span>北京</span></li>
<li><b>C</b><span>重庆</span></li>
<li><b>F</b><span>福建</span></li>
</ul>
</div>
</div>
</body>
</html>
显示效果如下：
