Вопросы Теги

Пользовательские изображения для флажка?

Я хотел бы показать флажок как кнопку переключения. Но я не могу применить к нему свои собственные изображения с помощью 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>
11
задан Dims 29 December 2011 в 11:53
поделиться