С решением этой проблемы или воплощением задуманного Вами в реальность, предлагаю следующий метод. С помощью jquery, этот метод будет задавать чекбоксу нужную картинку. Тоесть, у Вас должна быть нарисованная картинка активного и неактивного флажка. Ниже пример, как будет работать готовый вариант
Если это то что Вам нужно, то приступим к началу работы
Как обычно для скриптов. который используют jquery, сначала надо подключить библиотеку, но это нужно делать только в том случаи, если Вы ранее этого не делали или Ваша система управления сайтом по умолчанию сама ее не подключила.
В шапке или подвале сайта, указываем путь к нашей библиотеке
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Сразу после подключения библиотеки добавляем скрипт, который сделает задуманное.
<script type="text/javascript">
$(document).ready(
function(){
$.each($(".checkbox"),function(){
if($("input", this).is(':checked')){
$(this).addClass("checked")}});
$(".checkbox").click(function(){
$(this).toggleClass("checked");
var path = $("input", this);
if(path.is(':checked')){
path.attr("checked", false);
}else{ path.attr("checked", true)}});
});
</script>
Теперь в нужном месте, там где будут установлены флажки, скорее всего это какая-нибудь форма, нужно добавить элемент input type="checkbox", предварительно заключив его в родительский span и присвоив ему класс checkbox.
<span class="checkbox"> <input type="checkbox" name="one" value="1" id="one" /> <span class="check"></span> <label for="one"> Пункт1</label> </span>
По коду Вы видите, что после input - добавлен еще один span, которому присвоен класс check. Этот элемент и будет новым измененным флажком.
Теперь нужно добавить стили всем элементам, нашего кода.
span.checkbox{
cursor:pointer;
display:inline-block;
height:27px;
padding:0;
margin:0;}
span.checkbox:hover{
background:none;}
span.checkbox:hover .check{
border-color:none;}
span.checkbox input{
display:none;}
span.checkbox .check{
float:left;
width:27px;
height:27px;
background: #fff url(checkbox.png) no-repeat 0 -4px;
padding: 0;}
span.checkbox.checked .check{
background: url(checkbox.png) no-repeat 0px -31px;}
Ну и картинка как пример, сохраните ее себе, нажав на него правой кнопкой мыши и выбрав - Сохранить изображение. По надобности замените своей, но если у нее другой размер, то правильно укажите его в стилях.
Таких флажков можно создавать много, просто нужно указывать разные значения name и id. В нашем случаи это one. Тоесть для каждого нового флажка, придумайте новое имя. Если все сделано правильно, Вы увидите готовый результат.
А Вы на своем сайте используете стандартные чекбоксы или все же отдаете предпочтения стилизованным?
На этом все, спасибо за внимание. 🙂
