css怎么做打勾的方框

這個(gè)得用Html做的

公司主營(yíng)業(yè)務(wù)：網(wǎng)站制作、成都做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出黃島免費(fèi)做網(wǎng)站回饋大家。

form?action=""?method="get"

您喜歡的水果？br?/

labelinput?name="Fruit"?type="checkbox"?value="0"?/蘋(píng)果?/label

labelinput?name="Fruit"?type="checkbox"?value="1"?/桃子?/label

labelinput?name="Fruit"?type="checkbox"?value="2"?/香蕉?/label

labelinput?name="Fruit"?type="checkbox"?value="3"?/梨?/label

/form

如何在Ext校驗(yàn)成功后顯示對(duì)勾

做了兩件事：

1.使用'side'方式顯示錯(cuò)誤信息時(shí)，表單會(huì)縮進(jìn)，我把這個(gè)效果去掉了

2.實(shí)現(xiàn)對(duì)勾和嘆號(hào)圖標(biāo)的切換

注意：

我自定義了對(duì)勾的css樣式，這里叫做'icon-yes'

//表單校驗(yàn)通過(guò)時(shí)顯示對(duì)勾

//復(fù)寫(xiě)了Ext.layout.component.field.Field，該類(lèi)用于處理表單的label和錯(cuò)誤信息

//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配置項(xiàng)

//如果showValidIcon=true,并且使用'side'方式，

則使用對(duì)勾（否則是默認(rèn)，不對(duì)原來(lái)的代碼產(chǎn)生影響）

if(msgTarget

==?'side'?

owner.showValidIcon){

//初始化時(shí)不顯示icon

if(owner.isIconInit){

owner.errorEl.setDisplayed(false);

owner.isIconInit?=?true;

}

//一旦校驗(yàn)，顯示icon

owner.on('validitychange',?function(me,?valid){

me.errorEl.setDisplayed(true);???

});

Ext.apply(strategy,{

//取消縮進(jìn)效果

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;

//切換對(duì)勾圖標(biāo)

errorEl[hasError???'removeCls'?:?'addCls']('icon-yes');

Ext.layout.component.field.Field.initTip();?????????

}????

});

}

return?strategy;

}????????????????????????????????????????????????????

});

使用時(shí)只需要給表單項(xiàng)多配置一個(gè)showValidIcon: true即可。

自己對(duì)這段代碼不太滿意的地方是使用了‘validitychange’事件，如果用戶定義了自己的validitychange事件，執(zhí)行時(shí)可能會(huì)有順序問(wèn)題。但我也是迫于無(wú)奈。ExtJS4的布局封裝的太復(fù)雜了，弄不清是怎么做的。目前使用起來(lái)暫時(shí)沒(méi)有問(wèn)題。

css 怎么設(shè)置如圖的單選和復(fù)選樣式，就是那個(gè)對(duì)號(hào)

1、引用字體圖標(biāo)樣式，用字體圖標(biāo)解決。

2、用背景圖片解決。

3、用字符解決，就是

√ ??

√ ?