Как всем многим известно, простым CSS не заменить внешний вид checkbox'ов и radio на свой(графический), именно для этого я разработал скрипт, который помогает нам решить данную проблему!
Если посмотреть на все сервисы, сайты, да и вообще на правильную структуру использования checkbox'ов и radio, то можно заметить, что они все нужны для использования в формах(<form>...</form>), вот и я последовал данной структуре, следовательно скрипт будет заменять только те checkbox'ы и radio, которые соблюдают правильный порядок(см. ниже).
Code
form → label → input // true form → input // false input // false
Из выше указанного понятно, что работает только первая последовательность, да и вообще, по большей части все эти checkbox'ы и radio используются в опросах и формах входа, где как раз и есть такая последовательность!
Итак, приступим: Для начала разберёмся со скриптом:
Code
<script type='text/javascript'> /* * Скрипт смены вида чекбоксов и радио-кнопок на JavaScript от Latro * * @author Юрий Палеев <admin@latro.net.ru> * @license http://freebsd.org/copyright/freebsd-license.html * @link http://latro.net.ru * @version 2.0 */
(function(L, A, T, R, O) { function t(n, o) { return (o || document).getElementsByTagName(n) } function r(o, a, b, c){ return o[T].replace(a[b], a[c]) } for (i = 0; f = t(L)[i++];) { for (j = 0; l = t('label', f)[j++];) { var k = t(A, l)[0]; l[T] += ' ' + k.type + (k.disabled ? k.checked ? R[0] : R[1] : k.checked ? O[0] : O[1]); l.style.backgroundRepeat='no-repeat'; k.style.cssText = 'left:-99999px;position:absolute;top:-99999px'; k.onclick = function() { for (i = 0; d = t(L)[i++];) { for (j = 0; e = t(A, d)[j++];) { var p = e.parentNode, с = e.checked; p[T] = e.disabled ? с ? r(p, R, 1, 0) : r(p, R, 0, 1) : с ? r(p, O, 1, 0) : r(p, O, 0, 1) } } } } } })('form', 'input', 'className', ['-don', '-doff'], ['-on', '-off']); </script>
Также предлагаю сокращённую версию:
Code
<script type='text/javascript'> /* * Скрипт смены вида чекбоксов и радио-кнопок на JavaScript от Latro * * @author Юрий Палеев <admin@latro.net.ru> * @license http://freebsd.org/copyright/freebsd-license.html * @link http://latro.net.ru * @version 2.0 */
<style type='text/css'> form label{height:16px;padding-left:20px;width:16px} /* указываем расстояние текста от левого края, высоту и ширину изображений */
UnderShot, Aleko, а в чём собственно проблема, ховер и актив работают так-же как и со стандартными, вот вам пример! И это, рисуя все эти разноцветные иконки, я подумал сделать спрайтом, но это пока единственная проблема, её решу сегодня!
