用css写足矣，css中有focus这个神奇的东西，难道你没有用过吗，给你个例子吧
html:
<input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">css:
.input {border:0
padding:10px
font-size:1.3em
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI"
color:#ccc
border:solid 1px #ccc
margin:0 0 20px
width:300px
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2)
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2)
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2)
-webkit-border-radius: 3px
-moz-border-radius: 3px
border-radius: 3px
}
input:focus {
outline: none !important
border:1px solid red
box-shadow: 0 0 10px #719ECE
}
1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden
}
2、开始创建复选框区的HTML。代码如下：
<section>
<!-- Checbox One -->
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
3、用一个DIV元素包含checkbox，使用它们来做黑色条带和圆角。代码如下：
/*** Create the slider bar***/
.checkboxOne {
width: 40px
height: 10px
background: #555
margin: 20px 80px
position: relative
border-radius: 3px
}
4、当选中复选框后的判定代码。代码如下
/*** Move the slider in the correct position if the checkbox is clicked**/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px
}
复选框选中前。
复选框选中后。
不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:1.被点击时的效果可以用div:active{
css
}
2.鼠标覆盖在上面的时候可以用div：hover{
css}
3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：
a.先给div添加一个选中的样式比如on{css}；
b.然后在js中$('div').click(function{
$('div').toggleClass('
','on')
})
这是jquery自带的一个方法，点击div切换2个class,
