Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2017, 10:53
Интересующийся
Отправить личное сообщение для maks777 Посмотреть профиль Найти все сообщения от maks777
 
Регистрация: 09.06.2016
Сообщений: 29

как сделать checkbox чтобы отмечался крестиком а не галочкой
как сделать checkbox чтобы отмечался крестиком а не галочкой?
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2017, 11:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

maks777,
http://www.csscheckbox.com/
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2017, 11:37
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

maks777,
Это придется кастомный чекбокс делать
1) там через before/after (через его content или background)
2) самому чекбоксу делаешь opacity: 0 и позиционируешь абсолютно псевдоэлемент на его место (чтобы не перекрывалось надо z-index настроить)
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2017, 13:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от maks777
как сделать checkbox чтобы отмечался крестиком а не галочкой?
Еще статейка...
http://xiper.net/collect/html-and-cs.../nice-checkbox
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2017, 13:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

пост №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>
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2017, 14:14
Интересующийся
Отправить личное сообщение для maks777 Посмотреть профиль Найти все сообщения от maks777
 
Регистрация: 09.06.2016
Сообщений: 29

Спасибо огромное! Всё получилось!)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 14:07
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как сделать так чтобы в popup окне принимался css стили,? sarik Общие вопросы Javascript 2 12.03.2013 10:24
Как сделать, чтобы у toggle была ненулевая высота? student-k Общие вопросы Javascript 7 15.08.2011 23:46
КАК сделать чтобы кнопка PRINT не отображалась при печати?:?? xxxxx82 Элементы интерфейса 1 19.04.2011 14:58