Вопросы Теги

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

29
задан TylerH 28 April 2019 в 00:09
поделиться

5 ответов

Попробуйте: 

<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'))
});

Скрипка: http://jsfiddle.net/cn6kn/

11
ответ дан iambriansreed 28 April 2019 в 00:09
поделиться

Может быть, будет полезен мой образец с LESS. 

<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;
        }
    }
1
ответ дан Sergei Ryzhov 28 April 2019 в 00:09
поделиться

Вы можете использовать чистый 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;
}

Пример HTML: 

    .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;
    }
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
83
ответ дан Cheese 28 April 2019 в 00:09
поделиться

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

Мой сценарий был в том, что у меня был анализатор уценки, который генерирует эти изящные списки 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>

РЕДАКТИРОВАТЬ:

@connexo в комментарии указал, что входные элементы не могут иметь контент. Это можно легко сделать с помощью элемента label, например, вот так (пожалуйста, кто-нибудь исправит меня, если это не так, у меня нет удобного браузера для тестирования). 

#cb-span * {
  visibility: hidden;
}

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

input#cb:checked + label::after {
  content: " T ";
  color: green;
  background: red;
}
<!doctype html>
<html>

<body>
  <span id="cb-span">
    <input type="checkbox" id="cb">
    <label for="cb"></label>
  </span>
</body>

</html>

Флажок работает так же, как и обычный, и вы можете стилизовать его как угодно.

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

3
ответ дан Enbyted 28 April 2019 в 00:09
поделиться

Я создал Fiddle, используя чистый 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;
}

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

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

8
ответ дан Tony 28 April 2019 в 00:09
поделиться