CSS defines how to write valid code for Radio single option and Checkbox check box style
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.
