对于前端萌新来说，美化表单是个痛苦的事情，通常都是去寻找插件这种逃避的办法，其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出，下面的示例源码将体现 基础篇知识的实际应用。
<!--
author:helang
Email:[email protected]
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="[email protected]">
<title>jQuery之美——单选框/复选框美化</title>
<style type="text/css">
.ul_box {
margin:0 auto;
padding:0;
list-style:none;
width:600px;
}
.ul_box>li {
padding:10px 10px 0 10px;
overflow:hidden;
border-bottom:#e5e5e5 solid 1px;
}
.ul_box>li:last-child {
border-bottom:none;
}
.ul_box>li>div {
float:left;
}
.ul_box>li>div:nth-child(1) {
width:100px;
}
.ul_box>li>div:nth-child(2) {
width:480px;
overflow:hidden;
}
.label_box>label {
display:block;
float:left;
margin:0 10px 10px 0;
position:relative;
overflow:hidden;
}
.label_box>label>input {
position:absolute;
top:0;
left:-20px;
}
.label_box>label>div {
width:100px;
text-align:center;
border:#dddddd solid 1px;
height:40px;
line-height:40px;
color:#666666;
user-select:none;
overflow:hidden;
position:relative;
}
.label_box>label>div.active{
border:#d51917 solid 1px;
background-color: #fff9f8;
color:#d51917;
}
.label_box>label>div.active:after {
content:'';
display:block;
width:20px;
height:20px;
background-color:#d51917;
transform:skewY(-45deg);
position:absolute;
bottom:-10px;
right:0;
z-index:1;
}
.label_box>label>div.active:before {
content:'';
display:block;
width:3px;
height:8px;
border-right:#ffffff solid 2px;
border-bottom:#ffffff solid 2px;
transform:rotate(35deg);
position:absolute;
bottom:2px;
right:4px;
z-index:2;
}
</style>
</head>
<body>
<h1 style="text-align: center;">jQuery之美——单选框/复选框美化</h1>
<ul class="ul_box">
<li>
<div>单选框：</div>
<div class="label_box">
<label>
<input type="radio" name="sex">
<div>男</div>
</label>
<label>
<input type="radio" name="sex">
<div>女</div>
</label>
</div>
</li>
<li>
<div>复选框：</div>
<div class="label_box">
<label>
<input type="checkbox" name="hobby">
<div>旅游</div>
</label>
<label>
<input type="checkbox" name="hobby">
<div>爬山</div>
</label>
<label>
<input type="checkbox" name="hobby">
<div>游泳</div>
</label>
</div>
</li>
</ul>
<h5 style="text-align: center;">[email protected]</h5>
<script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
/* jQuery对象级别插件扩展 */
$.fn.extend({
/* 单选框 */
hlRadio:function () {
var radioEl=$(this);
radioEl.click(function () {
radioEl.siblings("div").removeClass("active");
$(this).siblings("div").addClass("active");
});
},
/* 复选框 */
hlCheckbox:function () {
var checkboxEl=$(this);
checkboxEl.click(function () {
if($(this).prop("checked")){
$(this).siblings("div").addClass("active");
}else {
$(this).siblings("div").removeClass("active");
}
});
}
});
$("input[name='sex']").hlRadio();
$("input[name='hobby']").hlCheckbox();
</script>
</body>
</html>知识点摘要：
点击上面的链接，可直接查看对应的知识点文章哦。
本篇文章主要为突出jQuery的使用，一般情况下纯CSS即可实现。但如果用于PC段还是建议使用本方式。
当然实现这整个效果，并不是JS一个人的功劳，CSS和HTML也同样重要。其中的关键先生是 <label> 标记，<label> 有着显式指向和隐式指向的功能
W3C <label> 标记介绍：http://www.w3school.com.cn/tags/tag_label.asp
纯CSS美化单选/复选框：http://www.jq22.com/webqd5106
--------------------------------------------------------------------------------------------------------------------------------
本篇文章是第一次将之前的基础篇文章知识点实际应用，也是第一次用插件的方式写。对于jQuery插件，不要觉得太过于神秘。只是别人写的功能多一点罢了，以后的源码示例文章都会尽量以插件的形式写。大家也可以多去尝试写一写自己的jQuery插件，不过在这之前，自己的基本功不能拖后退。尤其重点知识：面向对象编程，数据类型，工厂/构造/原型开发模式。
--------------------------------------------------------------------------------------------------------------------------------
下篇预告：jQuery之美——自定义下拉列表框
更多精彩文章，敬请持续关注——WEB前端梦之蓝
用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦！
