Shulou(Shulou.com)06/03 Report--

This article shows you CSS definition Radio single option and Checkbox check box style effective code how to write, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article, I hope you can get something.

We all know that the general use of css to define Radio single option and Checkbox check box style is not valid, I will introduce the use of CSS to define Radio single option and Checkbox check box style, friends who need to know can refer to.

Completely use css to instantiate

The code is as follows:

Form#form1 {font:12px tahoma,sans-serif}

Input [type= "checkbox"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}

Input [type= "checkbox"] + label {background:url (checkstyle.gif) no-repeat;padding-left:18px;color:#ccc;}

Input [type= "checkbox"] + label:hover {color:#369;background-position:0-16px;}

Input [type= "checkbox"]: checked+label {color:#000;background-position:0-48px;}

Input [type= "checkbox"]: focus+label {color:#963;background-position:0-32px;}

Input [type= "radio"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}

Input [type= "radio"] + label {background:url (checkstyle.gif) no-repeat 0-64pxTracterPaddingMurray leftve18pxPortColorporochrome;}

Input [type= "radio"] + label:hover {color:#369;background-position:0-80px;}

Input [type= "radio"]: checked+label {color:#000;background-position:0-112px;}

Input [type= "radio"]: focus+label {color:#963;background-position:0-96px;}

Using js to give an example

Html code

The code is as follows:

Checkboxes

I'm a fancy cross-browser styled checkbox

This is a checkbox

This is a checkbox

This is a checkbox

This is a checkbox

This is a checkbox

This is a checkbox

Apply any CSS styles for different states

Radio buttons

This is a radio button

This is a radio button

This is a radio button

This is a radio button

This is a radio button

This is a radio button

Js code

Var FancyForm = {

Start: function (elements, options) {

FancyForm.initing = 1

If ($type (elements)! = 'array') elements = $(' input')

If (! options) options = []

FancyForm.onclasses = ($type (options ['onClasses']) = =' object')? Options ['onClasses']: {

Checkbox: 'checked'

Radio: 'selected'

}

FancyForm.offclasses = ($type (options ['offClasses']) = =' object')? Options ['offClasses']: {

Checkbox: 'unchecked'

Radio: 'unselected'

}

If ($type (options ['extraClasses']) = =' object') {

FancyForm.extra = options ['extraClasses']

} else if (options ['extraClasses']) {

FancyForm.extra = {

Checkbox: 'fancicheckbox'

Radio: 'fission radio'

On: 'fancion'

Off: 'favored off.'

All: 'fancy'

}

} else {

FancyForm.extra = {}

}

FancyForm.onSelect = $pick (options ['onSelect'], function (el) {})

FancyForm.onDeselect = $pick (options ['onDeselect'], function (el) {})

Var keeps = []

FancyForm.chks = elements.filter (function (chk) {

If ($type (chk)! = 'element') return false

If (chk.get ('tag') = =' input' & & (FancyForm.onclasses [chk.getProperty ('type')]) {

Var el = chk.getParent ()

If (el.getElement ('input') = = chk) {

El.type = chk.getProperty ('type')

El.inputElement = chk

This.push (el)

} else {

Chk.addEvent ('click',function (f) {

If (f.event.stopPropagation) f.event.stopPropagation ()

});

}

} else if ((chk.inputElement = chk.getElement ('input')) & & (FancyForm.onclasses [(chk.type = chk.inputElement.getProperty (' type'))]) {

Return true

}

Return false

} .bind (keeps))

FancyForm.chks = FancyForm.chks.combine (keeps)

Keeps = null

FancyForm.chks.each (function (chk) {

Var c = chk.inputElement

C.setStyle ('position',' absolute')

C.setStyle ('left','-9999px')

Chk.addEvent ('selectStart', function (f) {f.stop ()})

Chk.name = c.getProperty ('name')

FancyForm.update (chk)

});

FancyForm.chks.each (function (chk) {

Var c = chk.inputElement

Chk.addEvent ('click', function (f) {

F.stop (); f.type = 'prop'

C.fireEvent ('click', f, 1)

});

Chk.addEvent ('mousedown', function (f) {

If ($type (c.onmousedown) = = 'function')

C.onmousedown ()

F.preventDefault ()

});

Chk.addEvent ('mouseup', function (f) {

If ($type (c.onmouseup) = = 'function')

C.onmouseup ()

});

C.addEvent ('focus', function (f) {

If (FancyForm.focus)

Chk.setStyle ('outline',' 1px dotted')

});

C.addEvent ('blur', function (f) {

Chk.setStyle ('outline', 0)

});

C.addEvent ('click', function (f) {

If (f.event.stopPropagation) f.event.stopPropagation ()

If (c.getProperty ('disabled')) / / c.getStyle (' position')! = 'absolute'

Return

If (! chk.hasClass (FancyForm.onclasses [chk.type]))

C.setProperty ('checked',' checked')

Else if (chk.type! = 'radio')

C.setProperty ('checked', false)

If (f.type = = 'prop')

FancyForm.focus = 0

FancyForm.update (chk)

FancyForm.focus = 1

If (f.type = 'prop' & &! FancyForm.initing & & $type (c.onclick) = =' function')

C.onclick ()

});

C.addEvent ('mouseup', function (f) {

If (f.event.stopPropagation) f.event.stopPropagation ()

});

C.addEvent ('mousedown', function (f) {

If (f.event.stopPropagation) f.event.stopPropagation ()

});

If (extraclass = FancyForm.extra [chk.type])

Chk.addClass (extraclass)

If (extraclass = FancyForm.extra ['all'])

Chk.addClass (extraclass)

});

FancyForm.initing = 0

$each ($$('form'), function (x) {

X.addEvent ('reset', function (a) {

Window.setTimeout (function () {FancyForm.chks.each (function (x) {FancyForm.update (x); x.inputElement.blur ()})

});

});

}

Update: function (chk) {

If (chk.inputElement.getProperty ('checked')) {

Chk.removeClass (FancyForm.offclasses [chk.type])

Chk.addClass (FancyForm.onclasses [chk.type])

If (chk.type = = 'radio') {

FancyForm.chks.each (function (other) {

If (other.name = = chk.name & & other! = chk) {

Other.inputElement.setProperty ('checked', false)

FancyForm.update (other)

}

});

}

If (extraclass = FancyForm.extra ['on'])

Chk.addClass (extraclass)

If (extraclass = FancyForm.extra ['off'])

Chk.removeClass (extraclass)

If (! FancyForm.initing)

FancyForm.onSelect (chk)

} else {

Chk.removeClass (FancyForm.onclasses [chk.type])

Chk.addClass (FancyForm.offclasses [chk.type])

If (extraclass = FancyForm.extra ['off'])

Chk.addClass (extraclass)

If (extraclass = FancyForm.extra ['on'])

Chk.removeClass (extraclass)

If (! FancyForm.initing)

FancyForm.onDeselect (chk)

}

If (! FancyForm.initing)

Chk.inputElement.focus ()

}

All: function () {

FancyForm.chks.each (function (chk) {

Chk.inputElement.setProperty ('checked',' checked')

FancyForm.update (chk)

});

}

None: function () {

FancyForm.chks.each (function (chk) {

Chk.inputElement.setProperty ('checked', false)

FancyForm.update (chk)

});

}

}

Window.addEvent ('domready', function () {

FancyForm.start ()

});

The above is the CSS definition of Radio single option and Checkbox check box style valid code how to write, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.