как сделать checkbox чтобы отмечался крестиком а не галочкой
как сделать checkbox чтобы отмечался крестиком а не галочкой?
|
maks777,
http://www.csscheckbox.com/ |
maks777,
Это придется кастомный чекбокс делать 1) там через before/after (через его content или background) 2) самому чекбоксу делаешь opacity: 0 и позиционируешь абсолютно псевдоэлемент на его место (чтобы не перекрывалось надо z-index настроить) |
Цитата:
http://xiper.net/collect/html-and-cs.../nice-checkbox |
:write: пост №2 по ссылке кнопка Download Checkbox Kit скачать, выбрать необходимый вариант.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type=checkbox].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
.lite-x-gray{background-image:url(http://csscheckbox.com/checkboxes/lite-x-gray.png);}
</style>
</head>
<body>
<input type="checkbox" class="css-checkbox" id="checkbox7" checked="checked"/>
<label for="checkbox7" name="checkbox7_lbl" class="css-label lite-x-gray">Gray X</label>
</body>
</html>
|
Спасибо огромное! Всё получилось!)
|
| Часовой пояс GMT +3, время: 23:40. |