css ТОЛЬКО стильные флажки и переключатели

В последнее время я тематически проецировал большой проект, и я использовал icheck.js для стилизации своих флажков, пока не понял, как медленно он реагирует на касания.css ТОЛЬКО стильные флажки и переключатели

Я понял, что путь - это css-стиль, однако из того, что я видел, флажок должен быть либо близко, либо внутри метки.

Метка каждого флажка имеет разную ширину и/или высоту, и флажок должен быть размещен справа, поэтому они имеют некоторое переменное расстояние между собой.

Любые идеи или любой скрипт, который работает с супер быстрыми сенсорными устройствами?

источник

2013-12-26 scooterlord

Если то, что я понимаю правильно, вы хотите, чтобы положить равные отступы между различными lengthed этикетками и флажками. Вы должны использовать таблицу для этого (простой способ) и 'align' right для' 's, в который вы помещаете флажки. Если то, что я понял, выглядит неправильно, можете ли вы нарисовать какой-нибудь каракули, пожалуйста? –

вот он: http://img33.imageshack.us/img33/8153/f1zn.jpg Как я уже сказал, мне нужно, чтобы флажки были в стиле, а не позиционированы. :/ – scooterlord

Надеюсь, что [это] (http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) даст больше знаний, чем я сейчас. –

Вы можете сделать это с помощью HTML/CSS и немного JS, но это немного сложно, и не очень чисто. Прежде всего, вам нужно обернуть ваши флажки другим элементом HTML (div или что-то еще) и скрыть свой элемент флажка (display: none).

Затем стилируйте элемент обертки, чтобы он соответствовал вашему пользовательскому флажку, с неконтролируемым состоянием (по умолчанию) и проверенным состоянием (используйте класс).

Окончательно, используйте несколько JS для управления щелчками на элемент обертки. Рабочая Скрипки, с JQuery (как я ленивый):

$('.wrapperCheckbox').click(function() { 
var checkbox = $(this).find('input[type="checkbox"]'); 
var checked; 
$(this).toggleClass('checked'); 
if(checkbox.is(':checked')){ 
    checked = false; 
} 
else { 
    checked = true; 
} 

checkbox.attr('checked', checked);   

});

http://jsfiddle.net/49Xg2/2/

Как вы можете видеть, это только плагин обертки для его ребенка флажка и это, безусловно, будет легче, чем с помощью LIB для этого. Обратите внимание, что я не тестировал его, поэтому, вероятно, это неправильно, но он показывает вам, как это сделать.

Я знаю, что вы не хотите использовать JS, но вы не можете получить результат только с HTML/CSS 100%, работая над всеми основными браузерами.

источник

2013-12-26 15:11:05 enguerranws

спасибо за ваш ответ. Я сделаю некоторые тесты и посмотрю, что произойдет. похоже, что мне придется пойти на компромисс об этом, как я его вижу. – scooterlord

Как бы это «снять флажок» с входа? – scooterlord

Вы правы, я забыл об этом, просто поставьте оператор if/else. – enguerranws

такой же без скрипта java используя только ярлык.

input[type=checkbox] { 
    display: none; 
} 
.wrapperCheckbox { 
    width: 2em; 
    height: 2em; 
    background: red; 
    display:block; 
} 
input[type=checkbox]:checked + label{ 

    background: blue;

}

http://jsfiddle.net/49Xg2/7/

источник

2013-12-26 16:38:59

это просто переключение фона. – scooterlord

Как вам управлять переключаемым состоянием на входе? – enguerranws

он проверяет и снимите флажок флажок http://jsfiddle.net/49Xg2/8/ ': checking', проверяет, если флажок установлен, если он есть, то фон получить синий –

css ТОЛЬКО стильные флажки и переключатели

ответ

Смежные вопросы