Javascript-форум - Кастомные Radio кнопки

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Кастомные Radio кнопки (https://javascript.ru/forum/misc/53241-kastomnye-radio-knopki.html)

Я дал ссылку - открываешь, смотришь туториалы. На css - и это серьезный плюс.

DemiuS,
чтобы использовать css нужно менять структуру сначала input type="radio" потом label - если неправ подскажите решение.
а так возможен такой вариант ... полифил classList для старых браузеров

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color: #66FF66;
  }

 label{
    width: 135px;
    display:block;
    margin:10px;
    padding-left:8px;
    background:url("http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png") no-repeat 0 0;
    background-color:#FF66CC;
    line-height:24px;
    border:#000000 1px solid;
    border-radius:15px;
    color:#6f8686;
    text-shadow:0 0 1px rgba(111,134,134,0.3);
  }



  label.check{
    text-shadow:-2px 2px #346392;
    font-size:24px;
    color:#fff;
    background-position:0 -24px;
  }



 input[type=radio]{
    width:28px;
    margin:0;
    padding:0;
    opacity:0;
  }

  em{
    margin-left: 24px;
  }

  </style>
</head>

<body>
<script>
function ch(x){
          var inputs = document.getElementsByName(x.name || "ceiling");
          for (var i=0; i<inputs.length; i++)  {
          inputs[i].parentNode.classList[inputs[i].checked ? "add" : "remove"]("check") }
}
window.onload = ch
</script>
<div class="radio-check">
		<div class="check-wrap">
			<label class="check-field active" value="1">
				<span class="icon"></span>
				<em>Текст1</em>
				<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="1" checked>
			</label>
			<label class="check-field" value="2">
				<span class="icon"></span>
				<em>Текст2</em>
				<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="2">
			</label>
			<label class="check-field"  value="3">
              <span class="icon"></span>
				<em>Текст3</em>
				<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="3">
			</label>
		</div>
	</div>

</body>

</html>

Цитата:

Сообщение от рони

inputs[i].checked ? "add" : "remove"

Вообще есть toggle(class:string, force:boolean), но параметр force добавили позже, в связи с чем он не работает в целом ряде старых версий браузеров. Впрочем, хороший полифилл это исправит.

danik.js,
ок буду знать ...
а что такое old так и не подскажешь --
input[type=checkbox]:not(old),
увидел тут http://code.stephenmorley.org/html-a...radio-buttons/
код css что выше взят оттуда

Цитата:

Сообщение от рони

not(old)

Я когда смотрел, еще вчера, то тоже не понял.
Щас только осенило - это походу барьер для старых браузеров. Смысл в том, чтобы эти правила игнорировались браузерами, не поддерживающими :not(). Я так думаю. Код не читал, так что не уверен.

danik.js,
спасибо за мысль