Добро пожаловать, Гость!
Стилизация checkbox\'a
Помощь мастерам | Стилизация checkbox\'a

Стилизация checkbox\'a
22 Ноября 2014Доброе утро! В общем, возник вопрос по CSS. Как указать стиль checkbox'а? Порой попадаются сайты с указанным стилем, но как сделать сие самому - не знаю. Перерыл весь интернет уже, но ничего толкогого даже на хабре нема. Может, кто знает? Уверен, многим это нужно

Комментарии:

Автор темы
Engine (22 Ноября 2014):
Ps. Сразу отвечаю на вопрос «как менять стиль span если поставить/убрать галочку»
input[type="checkbox"] + span {
Стиль без галочки
}
input[type="checkbox"]:checked + span {
Стиль с галочкой
}
Engine, про такой способ я знаю))Ps. Сразу отвечаю на вопрос «как менять стиль span если поставить/убрать галочку»
input[type="checkbox"] + span {
Стиль без галочки
}
input[type="checkbox"]:checked + span {
Стиль с галочкой
}
Но там так или иначе нужно подключать JQuery библиотеку для того, чтобы наш спан отсылал серверу свое значение. А я хочу без библиотек.. Похоже, что облом. Тогда подключу библиотеку оформления гугла, там наш флаг был


Автор темы
scpasis13 (22 Ноября 2014):
RuDati, должно все работать.походу ты не так сохраняешь файл. Туда можно картинку поставить к примеру выбор пола женская и мужская картинка.посмотри правильность сохранения файла. И будит работать
Уберите этого дибилаRuDati, должно все работать.походу ты не так сохраняешь файл. Туда можно картинку поставить к примеру выбор пола женская и мужская картинка.посмотри правильность сохранения файла. И будит работать


RuDati (22 Ноября 2014):
Я на дурака, по - твоему, похож?!
1. Кроссбраузерностью тут не пахнет
( нужно -webkit, -o, -moz и тд)
А Кроссбраузерность - вещь важная.
и второе:
С андроида не пашет ни с какого браузера.
Даже input[type="checkbox"] + label не хочет перекрывать родной стиль.
RuDati, должно все работать.походу ты не так сохраняешь файл. Туда можно картинку поставить к примеру выбор пола женская и мужская картинка.посмотри правильность сохранения файла. И будит работатьЯ на дурака, по - твоему, похож?!
1. Кроссбраузерностью тут не пахнет
( нужно -webkit, -o, -moz и тд)
А Кроссбраузерность - вещь важная.
и второе:
С андроида не пашет ни с какого браузера.
Даже input[type="checkbox"] + label не хочет перекрывать родной стиль.



Ps. Сразу отвечаю на вопрос «как менять стиль span если поставить/убрать галочку»
input[type="checkbox"] + span {
Стиль без галочки
}
input[type="checkbox"]:checked + span {
Стиль с галочкой
}



Им нельзя указывать стили. Но можно сделать небольшой хак.
Скрыть само поле и стилизовать допустим span и обернуть все это в label.
Пример:
<label>
<input type="checkbox" style="display: none">
<span class="твои стили"><span>
</label>
То есть спан визуально должен быть похож на флажок