Javascript-форум - кастомный checkbox

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - кастомный checkbox (https://javascript.ru/forum/xhtml-html-css/37614-kastomnyjj-checkbox.html)

кастомный checkbox

дизайнер надизайнил кастомній чекбокс
(во вложении для наглядности)

как это реализовать грамотно?

В современных браузерах можно обойтись css:

<style>
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label{
    display: inline-block;
    width: 38px;
    height: 32px;
    background-image: url(http://javascript.ru/forum/attachments/xhtml-html-css/1727d1366998566-kastomnyjj-checkbox-checkbox_blue_empty-png);
}
input[type="checkbox"]:checked + label{
    background-image: url(http://javascript.ru/forum/attachments/xhtml-html-css/1726d1366998566-kastomnyjj-checkbox-checkbox_blue_selected-png);
}
</style>
<input type="checkbox" id="checkbox1"><label for="checkbox1"></label>

Только картинки естественно спрайтом делать надо.

Могу сказать как я у себя делал чекбоксы.

Вообщем, есть иконка галочки:

И есть пустое однопиксельное-прозрачное gif изображение.

Вот сам стиль для рамки checkbox'а:

.checkbox {border:1px solid #626262; width:16px; height:16px; opacity:0.8; background:#303030;}
.checkbox:not([alt="2"]):hover {cursor:pointer; opacity:1;}
.checkbox[alt="1"], .checkbox[alt="2"] {background-image: url('ссылка на изобрежние галочки');}
.checkbox[alt="2"] {opacity:0.5;}

А вот уже сам код JavaScript (jQuery):

$('.checkbox').click(function()
{
   var a = $(this).attr('alt');
   if(a != 2) $(this).attr('alt', a == 1 ? 0 : 1);
});

Или альтернативный вариант (не jQuery):

function checkBox(a)
{
   if(a.alt != 2) a.alt = a.alt ? 0 : 1;
}

window.onload = function()
{
   var a = document.getElementsByClassName('checkbox'), b;
   for(b=0; b<a.length; b++) a[b].onclick = function(b)
   {
      checkBox(a[b]);
   }
}

А вот так вставляем в HTML:

Без галочки: <img alt="0" src="пустая картинка.gif" class="checkbox" />
С галочкой:  <img alt="1" src="пустая картинка.gif" class="checkbox" />
Disabled:  <img alt="2" src="пустая картинка.gif" class="checkbox" />

Вот скрин с моего сайта:

Под форму наверное не подойдёт, я у себя сделал так, потому что использую всегда ajax и просто получаю значение атрибута alt.

P.S.: альтернативный код JS не проверял, но работать должен.

Железный вариант:

<div class="checkbox">
    <i></i>
    <input id="ch0" type="checkbox" name="name" />
    <label for="ch0">Лейбл для чекбокса</label>
</div>

.checkbox{
    position:relative;
}
.checkbox input{
    position:absolute;
    top:0;
    left:0;
    width: 38px;
    height: 32px;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.checkbox i{
    display:block;
    width: 38px;
    height: 32px;
    position:absolute;
    top:0;
    left:0;
    backgroung:transparent url('/image/url/example.jpg') no-repeat 0 0;
}
.checkbox.checked i{
    background-position:0 -32px;
}
.checkbox label{
    position:relative;
    padding:0 0 0 48px;
}

$('.chackbox').on({
    change:function(ev){
        var parent = $(ev.delegateTarget);
        var input = $(ev.target);
        parent[(input.prop('checked') ? 'addClass' : 'removeClass')]('checked');
    }
});

Цитата:

Сообщение от Ruslan_xDD

И есть пустое однопиксельное-прозрачное gif изображение.

Ты навено еще фон нарезаешь на кусочки "чтоб быстрей грузилось" и в таблицы вставляешь распорки из этих самых пустых гифок, я угадал? А еще теги пишешь кэпслоком, используешь <body onload> атрибут, а фон через bg. А меню верстаешь через <map>, правда же? И конечно же не забываешь обрамлять html-комментарием скрипты и вовсю используешь document.all и layer's.

Это то, с чем у людей ассоциируется однопиксельный gif :)

Цитата:

Сообщение от Aetae

В современных браузерах можно обойтись css:

В сафари и в мобильных браузерах проблем не возникнет?

danik.js,
Хз, никогда так не делаю. Ну его в пень.)