Пользовательские картинки для галочки? - PullRequest
Новая
       31

Пользовательские картинки для галочки?

11 голосов
/ 29 декабря 2011

Я хотел бы показать флажок в качестве кнопки переключения.Но я не могу применить свои собственные изображения к нему с CCS - все еще флажок отрисован.Как выполнить эту задачу?

Мой CSS: 

input[type=checkbox]#settingsbutton {
    border-style: none;
    background-color: transparent;
    width: 42px;
    height: 40px;
    display: block;
}

input[type=checkbox].button-settings {
    background-image: url("images/button-settings-normal.png");
}

input[type=checkbox].button-settings:active {
    background-image: url("images/button-settings-normal.png");
}

input[type=checkbox].button-settings:hover {
    background-image: url("images/button-settings-hover.png");
}

input[type=checkbox].button-settings:active {
    background-image: url("images/button-settings-pressed.png");
}

Мой HTML: 

 <body>

<input type="checkbox" id="settingsbutton" class="button-settings"/>

 </body>

Ответы [ 3 ]

15 голосов
/ 29 декабря 2011

Если вы хотите использовать чистое решение css, вам нужно добавить label в вашу разметку. Это trick и напишите вот так: 

input[type=checkbox]{
    display:none;
}
input[type=checkbox] + label{
    height: 40px;
        width: 42px;
} 
body:not(#foo) input[type=checkbox]:checked + label{
    background-image: url("images/button-settings-normal.png");
} 

body:not(#foo) input[type=checkbox] + label{
    background-position:0 -46px; /* as per your requirement*/
    height: 40px;
}

HTML 

<body>

<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>

 </body>

Прочитайте эти статьи:

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

Но это не работает в IE8 и ниже

2 голосов
/ 29 декабря 2011

См. Эту ссылку для проверки флажков: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

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

0 голосов
/ 27 октября 2016

Попробуйте это решение, если у вас есть текст в метке 

input[type=checkbox]{
    display:none;
}
input[type=checkbox] + label:before{
    height: 42px;
    width: 42px;
    content: url("../img/chk.jpg");
} 
body input[type=checkbox]:checked + label:before{
    content: url("../img/chk_checked.jpg");
}
...