CSS+JQ表单美化
众所周知，html中表单的输入框和文本框的样式是可以通过css样式很容易设置出来自己想要的效果，但是单选，复选和下拉选择这三个元素，通过css来直接设置却是不太理想，尤其是下拉框select元素的样式设置。
其实网上还是有一些不错的解决方案，就集合在下面。
单选radio元素和多选checkbox元素的css样式设置，主要是通过伪类模拟。
下拉框select元素用css直接设置，基本上是没有太理想的解决方案，我这里是通过用单选radio元素的组合来模拟成下拉框select元素的效果。嗯，所有的表单元素都是用css写的，没有用到js，至于兼容性则还没有验证。
直接上代码吧，大家复制粘贴，在浏览器中预览就可以了。
或者直接下载现成的 css+jq表单美化 ，现在之后修改下文件后缀 .txt 为 .html ，就可以直接浏览了。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="wcdstudio">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>css+jq表单样式美化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
body{line-height: 20px;}
table tr td{padding: 10px;}
</style>
<form action="" method="get">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>姓名</td>
<td><div><input type="text" name="textfield" /></div></td>
</tr>
<tr>
<td>电话</td>
<td>
<div><input type="text" name="textfield2" /></div>
<style>
/*--输入框样式--*/
.text input{height: 30px;border: 1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);padding:0 5px;}
</style>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<div><textarea name="textarea"></textarea></div>
<style>
/*--文本框样式--*/
.textarea textarea{display:block;height: 60px;border: 1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);padding:5px;}
</style>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<div><label><input type="radio" name="radiobutton" value="radiobutton" /><span>男</span></label></div>
<div><label><input type="radio" name="radiobutton" value="radiobutton" /><span>女</span></label></div>
<div><label><input type="radio" name="radiobutton" value="radiobutton" /><span>不能说的秘密</span></label></div>
<style>
/*--单选样式--*/
.radio{margin-right:20px;font-size:13px;}
.radio label{display:block;position:relative;white-space:nowrap;}
.radio input{width:20px;height:20px;opacity:0.5;float:left;}
.radio span{display:inline-block;padding-left:5px;}
.radio span:after{content:'';display: block;position: absolute;top:0;left:0;width: 18px;height: 18px;background: #f9f9f9;border-radius: 20px;border:1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);opacity:0.5;}
.radio input:checked+span:after{width:18px;height:18px;background:#333;background-image:linear-gradient(45deg,transparent 10%,#ccc 10%,#ccc 16%,transparent 16%, transparent 100%),linear-gradient(-45deg,transparent 20%,#ccc 20%,#ccc 26%,transparent 26%, transparent 20px);background-size:18px 18px;background-position: 3px -4px, -3px -4px;border:1px solid #333;}
</style>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<div><label><input type="checkbox" name="checkbox" value="checkbox" /><span>篮球</span></label></div>
<div><label><input type="checkbox" name="checkbox2" value="checkbox" /><span>音乐</span></label></div>
<div><label><input type="checkbox" name="checkbox3" value="checkbox" /><span>电视</span></label></div>
<style>
/*--多选选样式--*/
.checkbox{margin-right:20px;}
.checkbox label{display:block;position: relative;font-size:13px;}
.checkbox input{width: 20px;height: 20px;float:left;opacity:0.5;}
.checkbox span{display:inline-block;padding-left:5px;}
.checkbox span:after{content:'';display: block;position: absolute;top:0;left:0;width: 18px;height: 18px;background:#f9f9f9;border:1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);opacity:0.5;}
.checkbox input:checked+span:after{width:18px;height:18px;background:#333;background-image:linear-gradient(45deg,transparent 10%,#ccc 10%,#ccc 16%,transparent 16%, transparent 100%),linear-gradient(-45deg,transparent 20%,#ccc 20%,#ccc 26%,transparent 26%, transparent 20px);background-size:18px 18px;background-position: 3px -4px, -3px -4px;border:1px solid #333;}
</style>
</td>
</tr>
<tr>
<td>地区</td>
<td>
<dl>
<dt>请选择</dt>
<dd>
<div><label><input type="radio" name="radiobutton1" value="radiobutton" /><span>在样式中调整opacity为0(透明)</span></label></div>
<div><label><input type="radio" name="radiobutton1" value="radiobutton" /><span>即可隐藏默认radio样式</span></label></div>
<div><label><input type="radio" name="radiobutton1" value="radiobutton" /><span>上海</span></label></div>
</dd>
</dl>
<style>
/*--下拉样式--*/
.selectsbox{position:relative;display:block;width:300px;font-size:13px;}
.selectsbox dt{font-size:13px;font-weight:normal;padding:5px;background:#f9f9f9;border:1px solid #eee;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);position:relative;}
.selectsbox dt:after{content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);right:10px;border-top:5px solid #ddd;border-left:5px solid transparent;border-right:5px solid transparent;}
.selectsbox dd{display:none;position:absolute;z-index:1;top:32px;left:0;width:300px;background:#f9f9f9;}
.selectsbox dd div:hover{background:#ddd;}
.select{padding:5px;border:1px solid #eee;border-top:none;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);position:relative;}
.select label{position:relative;display:block;}
.select input{position:absolute;top:50%;left:80%;transform:translate(-50%,-50%);opacity:0.5;}
.select span:after{content:'';display: block;position: absolute;top:0;right:0;width: 18px;height: 18px;background:#f9f9f9;border:1px solid #ddd;}
.select input:checked+span:after{width:18px;height:18px;background:#333;background-image:linear-gradient(45deg,transparent 10%,#ccc 10%,#ccc 16%,transparent 16%, transparent 100%),linear-gradient(-45deg,transparent 20%,#ccc 20%,#ccc 26%,transparent 26%, transparent 20px);background-size:18px 18px;background-position: 3px -4px, -3px -4px;border:1px solid #333;}
.selectsbox:hover dd{display:block;}
</style>
<script>
$(function(){
$(".select").click(function(){
$(".selectsbox dt").html($(this).find("span").html());
})
})
</script>
</td>
</tr>
<tr>
<td> </td>
<td>
<div><input type="submit" name="Submit" value="提交" /></div>
<style>
/*--按钮样式--*/
.submit input{width:80px;height: 30px;border: 1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);}
</style>
</td>
</tr>
<tr>
<td> </td>
<td>
<div tabindex="1">
<input type="radio" name="radiobutton2" value="radiobutton" id="opt1" checked /><label for="opt1">在样式中调整opacity为0(透明)</label>
<input type="radio" name="radiobutton2" value="radiobutton" id="opt2" /><label for="opt2">即可隐藏默认radio样式</label>
<input type="radio" name="radiobutton2" value="radiobutton" id="opt3" /><label for="opt3">上海</label>
</div>
<style>
.selectx{display:flex;width:300px;flex-wrap:wrap;position:relative;height:40px;}
.selectx label{width:300px;line-height:40px;display:block;display:flex;position:absolute;top:0;pointer-events:none;order:2;z-index:1;}
.selectx label:hover{background:#ddd;}
.selectx:focus label {position:relative;pointer-events:all;}
.selectx input:checked+label{order:1;z-index:2;background:#ddd;}
</style>
</td>
</tr>
</table>
</form>
</body>
</html>
