文本框
input-text
文本框
input-text radius
密码
input-text
密码
input-text radius
说点什么...
textarea
说点什么...
textarea radius
不支持圆角和背景渐变浏览器，如IE低版本，会显示扁平纯色直角效果。
文本框尺寸
定义了五种规格尺寸
文本框 class=""
迷你尺寸
input-text radius size-MINI
小尺寸
input-text radius size-S
默认尺寸
input-text radius size-M
大尺寸
input-text radius size-L
特大尺寸
input-text radius size-XL
HTML代码
<input type="text" placeholder="迷你尺寸" class="input-text radius size-MINI">
<input type="text" placeholder="小尺寸" class="input-text radius size-S">
<input type="text" placeholder="默认尺寸" class="input-text radius size-M">
<input type="text" placeholder="大尺寸" class="input-text radius size-L">
<input type="text" placeholder="特大尺寸" class="input-text radius size-XL">
CSS代码
/*默认状态*/
.input-text,.textarea{box-sizing:border-boxborder:solid 1px #dddwidth:100%
-webkit-transition:all 0.2s linear 0s
-moz-transition:all 0.2s linear 0s
-o-transition:all 0.2s linear 0s
transition:all 0.2s linear 0s}
.textarea{ height:autofont-size:14pxpadding:4px}
.input-text:hover,.textarea:hover{border: solid 1px #3bb4f2}
/*得到焦点后*/
.input-text.focus,textarea.focus{border:solid 1px #0f9ae0 \9border-color:rgba(82,168,236,0.8)box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)}
/*不可点击*/
.input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus{background-color:#edededcursor:defaultborder-color: #ddd
-webkit-box-shadow:inset 0 2px 2px #e8e7e7
-moz-box-shadow:inset 0 2px 2px #e8e7e7
box-shadow:inset 0 2px 2px #e8e7e7}
/*只读状态*/
.input-text.disabled,.textarea.disabled{background-color:#e6e6e6cursor:default}
/*阴影*/
.input-text.box-shadow,.textarea.box-shadow{-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}
3.4.2 radio,checkbox 单选 多选
使用icheck插件进行美化。
须单独引用icheck.css，jquery.icheck.min.js两个文件。 打包下载
复选框 复选框 checked状态 Disabled Disabled &checked
单选按钮 单选按钮 checked状态 Disabled Disabled &checked
HTML代码
<div class="skin-minimal">
<div class="check-box">
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1">复选框</label>
</div>
<div class="check-box">
<input type="checkbox" id="checkbox-2" checked>
<label for="checkbox-2">复选框 checked状态</label>
</div>
<div class="check-box">
<input type="checkbox" id="checkbox-disabled" disabled>
<label for="checkbox-disabled">Disabled</label>
</div>
<div class="check-box">
<input typ www.hbbz08.com e="checkbox" id="checkbox-disabled-checked" checked disabled>
<label for="checkbox-disabled-checked">Disabled &checked</label>
</div>
</div>
<div class="mt-20 skin-minimal">
<div class="radio-box">
<input type="radio" id="radio-1" name="demo-radio1">
<label for="radio-1">单选按钮</label>
</div>
<div class="radio-box">
<input type="radio" id="radio-2" name="demo-
给你个更好用的，当然你也可以自己随意修改
<div class="i-check"><input type="checkbox" checked/>
<label></label>
</div>
css
.i-check {width: 20pxheight: 20pxposition: relativemargin: 20px auto}.i-check label {width: 20pxheight: 20pxposition: absolutetop: 0left: 0background: #1A9909border-radius: 4px}
.i-check label:after {content: ''width: 9pxheight: 5pxposition: absolutetop: 4pxleft: 4pxborder: 3px solid #fffborder-top: noneborder-right: nonebackground: transparentopacity: 0transform: rotate(-45deg)}
.i-check input[type=checkbox]:checked + label:after {opacity: 1}
.i-check input[type=checkbox] {opacity: 0position: absolutez-index: 2left: 0top: 0width: 100%height: 100%margin: 0cursor: pointer}
给你个插件吧：http://www.bootcss.com/p/icheck/原理就是自己做两个checkbox的样式，一个为空一个为选中状态。将原来的默认的checkbox隐藏掉，通过label去控制隐藏掉的checkbox状态。最后通过js判断该隐藏的checkbox状态，从而改变你自定义的checkbox样式。
希望可以帮到你。
