<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>源码小筑-CSS3复选框和单选按钮美化</title>
<style type="text/css">
#holder {
width: 100%
}
.regular-checkbox {
display: none
}
.regular-checkbox + label {
background-color: #fafafa
border: 1px solid #cacece
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)
padding: 9px
border-radius: 3px
display: inline-block
position: relative
}
.regular-checkbox:checked + label {
background-color: #e9ecee
border: 1px solid #adb8c0
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1)
color: #99a1a7
}
.regular-checkbox:checked + label:after {
content: '\2714'
font-size: 14px
position: absolute
top: -15px
left: 3px
color: red
}
.big-checkbox + label {
padding: 18px
}
.big-checkbox:checked + label:after {
font-size: 50px
left: 15px
}
</style>
</head>
<body>
<div id="holder">
<center>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
</center>
</div>
</body>
</html>
顺便打个广告，推荐一个特效网站 源码小筑-http://www.codevillas.com，呵呵
1.我们以谷歌浏览器为例，来讲讲怎么调试CSS。先打开谷歌浏览器，看截图里的红色箭头，点击“工具”，点击“开发者工具”，就打开调试工具了，也可以按下快捷键F12来打开调试工具；
2.打开的调试工具如下图所示：
3.我们就以百度的首页为例，看看调试效果。看截图，点击那个“抓取元素”的按钮，来获取要审查的元素；
4.看截图，出现下面的界面后，点击“style”，单击那个对勾，就可以看到效果了；
5.我去掉一些样式之后，就出现了下面的效果，看截图；
做了两件事：
1.使用'side'方式显示错误信息时，表单会缩进，我把这个效果去掉了
2.实现对勾和叹号图标的切换
注意：
我自定义了对勾的css样式，这里叫做'icon-yes'
//表单校验通过时显示对勾//复写了Ext.layout.component.field.Field，该类用于处理表单的label和错误信息
//showValidIcon :
Boolean
Ext.layout.component.field.Field.override({
getErrorStrategy: function() {
var me = this,
owner = me.owner,
strategies = me.errorStrategies,
msgTarget = owner.msgTarget
var strategy
= !owner.preventMark &&
Ext.isString(msgTarget) ? (strategies[msgTarget] ||
strategies.elementId) : strategies.none
//给表单自定义showValidIcon:Boolean配置项
//如果showValidIcon=true,并且使用'side'方式，
则使用对勾（否则是默认，不对原来的代码产生影响）
if(msgTarget
== 'side' &&
owner.showValidIcon){
//初始化时不显示icon
if(owner.isIconInit){
owner.errorEl.setDisplayed(false)
owner.isIconInit = true
}
//一旦校验，显示icon
owner.on('validitychange', function(me, valid){
me.errorEl.setDisplayed(true)
})
Ext.apply(strategy,{
//取消缩进效果
adjustHorizInsets : Ext.emptyFn,
layoutHoriz
: function(ownerContext, owner, size) {
ownerContext.errorContext.setProp('x', size.width)
},
layoutVert:
function(ownerContext, owner)
{
ownerContext.errorContext.setProp('y',
ownerContext.insets.top)
},
prepare :
function(ownerContext, owner) {
var errorEl
= owner.errorEl
errorEl.addCls(Ext.baseCSSPrefix + 'form-invalid-icon')
errorEl.set({'data-errorqtip': owner.getActiveError() ||
''})
var
activeError = owner.getActiveError(),
hasError =
!!activeError
//切换对勾图标
errorEl[hasError ? 'removeCls' : 'addCls']('icon-yes')
Ext.layout.component.field.Field.initTip()
}
})
}
return strategy
}
})
使用时只需要给表单项多配置一个showValidIcon: true即可。
自己对这段代码不太满意的地方是使用了‘validitychange’事件，如果用户定义了自己的validitychange事件，执行时可能会有顺序问题。但我也是迫于无奈。ExtJS4的布局封装的太复杂了，弄不清是怎么做的。目前使用起来暂时没有问题。
