Изменить checkbox проверить изображение на пользовательское изображение

Question

Я пытаюсь изменить по умолчанию «полевое изображение» флажка с помощью css, но он не работает. Есть ли способ сделать это?

<input type="checkbox" class="class_checkbox"> 

И в файле класса я

.class_checkbox{ 
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;  
} 

Answer 1

Try:

<input type="checkbox" class="input_class_checkbox"> 

JQuery

$('.input_class_checkbox').each(function(){ 
    $(this).hide().after('<div class="class_checkbox" />'); 

}); 

$('.class_checkbox').on('click',function(){ 
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')) 
}); 

Fiddle: http://jsfiddle.net/cn6kn/

Answer 2

Вы можете использовать чистый CSS, просто добавьте метку в окошке, как это:

.check_box { 
    display:none; 
} 

.check_box + label{ 
    background:url('images/check-box.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

.check_box:checked + label{ 
    background:url('images/check-box-checked.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Answer 3

Я создал скрипку, используя чистый CSS. Самый проголосовавший ответ не обрабатывает события кликов и не будет работать хорошо, потому что значение флажка не изменится.

Это мой пример:

http://jsfiddle.net/kEHGN/1/

В принципе, нам понадобится следующий HTML:

<div class="checkbox_wrapper"> 
    <input type="checkbox" /> 
    <label></label> 
</div> 

И следующий CSS:

.checkbox_wrapper{ 
    position: relative; 
    height: 16px; 
    width: 17px; 
} 

input[type="checkbox"] { 
    opacity:0; 
    height: 16px; 
    width: 17px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

input[type="checkbox"] + label{ 
    background:url('../images/unchecked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

input[type="checkbox"]:checked + label{ 
    background:url('../images/checked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Просто проверить маршруты изображения, а также ширины и высоты должны быть равны ширине a и высоту изображений. На скрипачке я использую кодированные изображения base64.

Надеюсь, это может быть полезно.

Answer 4

Вот простой способ CSS изменить стиль флажка. Я нашел это действительно полезным, так как у меня уже были другие функции, связанные с теми же самыми флажками.

http://www.jotform.org/html-elements/css-checkbox-background-color/

БР

Answer 5

Возможно будет полезно мой пример с меньшими затратами.

<div class="custom-checkbox"> 
    <input component="input" type="checkbox"/> 
    <label>Here is caption right to checkbox</label> 
</div> 

    @imgsize: 25px; 
    .custom-checkbox{ 
     position: relative; 

     > input[type="checkbox"] { 

     display:none; 
     position: absolute; 
     top: 0; 
     left: 0; 

      + label{ 

       background:url('../img/unchecked.png') no-repeat 0 0; 
       background-size:@imgsize; 
       height: @imgsize; 
       padding: 4px 0 5px 35px; 
       display: inline-block; 
       -webkit-transition-duration: 0.3s; 
       -moz-transition-duration: 0.3s; 
       transition-duration: 0.3s;   
      } 
     } 
     > input[type="checkbox"]:checked + label{ 

      background:url('../img/checked.png') no-repeat; 
      background-size:@imgsize @imgsize; 
     } 
    } 

Answer 6

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

Мое предположение заключалось в том, что у меня был парсер разметки, который генерирует эти изящные списки TODO, и я хотел их стилизовать.Изменение генерируемый HTML не вариант, поэтому я пришел к этому решению:

данный флажок, как это:

<input type="checkbox" id="cb"> 

Вы можете стилизовать его с visibility: hidden на флажок и visibility: visible на :: после, как это:

#cb { 
 
    visibility: hidden; 
 
} 
 

 
input#cb::after { 
 
    visibility: visible; 
 
    content: "F"; 
 
    color: red; 
 
    background: green; 
 
    padding: 8px; 
 
} 
 

 
input#cb:checked::after { 
 
    content: " T "; 
 
    color: green; 
 
    background: red; 
 
}

<!doctype html> 
 
<html> 
 

 
<body> 
 
    <input type="checkbox" id="cb"> 
 
</body> 
 

 
</html>

флажок работает точно так же, как нормальный и вы можете в любой момент погладить его.

Может быть, это поможет someody (и я могу закладку, потому что я ничего подобного в Интернете не нашел)