Как задать класс стиля для чекбоксов

dimochkasainr

Осваиваюсь на форуме
13
0 / 0

Как задать класс стиля для чекбоксов

« : 02.10.2017, 12:19:45 »

Имеется нужда сделать красивые чекбоксы в форме. Заказчик попросил. Но как задать для них стиль не фига не понимаю. В макете формы все выглядит допустим так...

   <div class="rsform-block rsform-block-test">
      <div class="formControlLabel">{test:caption}</div>
      <div class="formControls">
      <div class="formBody">{test:body}<span class="formValidation">{test:validation}</span></div>
      <p class="formDescription">{test:description}</p>
   </div>
А стиль для чекбосов надо допустим задать такой сlass. Чтобы вышло типа <input type="checkbox" class="js-switch" checked />

Как мне подставить класс? Ведь в макете нет явного синтаксиса. Здесь только условные переменны, которые компонент потом компилирует в HTML код. Извините, если лажаю с терминологией, жду помощи.

Записан

Ilhom666

Завсегдатай
1384
184 / 0

Re: Как задать класс стиля для чекбоксов

« Ответ #1 : 02.10.2017, 15:18:15 »

если для всех чекбоксов, то input[type="checkbox"] {xxx:bla-bla;}
если только для определенных, то смотрите внутри какого контейнера они находятся

Записан

dimochkasainr

Осваиваюсь на форуме
13
0 / 0

Re: Как задать класс стиля для чекбоксов

« Ответ #2 : 18.10.2017, 21:46:57 »

Извиняюсь заранее за тупость. Но как я все это пропишу через один стиль

Код

.toggle, .toggle2 {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.toggle + label, .toggle2 + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.switch{
	margin: 10px 10px;
}

/*Горизонтальный переключатель*/
input.toggle-round + label {
  padding: 2px;
  width: 118px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.toggle-round + label:before,
input.toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.toggle-round + label:before {
  right: 1px;
  background-color: #ea574a;
  border-radius: 60px;
  transition: background 0.4s;
}
input.toggle-round + label:after {
  width: 60px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.toggle-round:checked + label:after {
  margin-left: 60px;
}

/*Вертикальный переключатель*/
input.toggle-round2 + label {
  padding: 2px;
  width: 60px;
  height: 118px;
  background-color: #dddddd;
  border-radius: 60px;
}

input.toggle-round2 + label:before,
input.toggle-round2 + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.toggle-round2 + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}

input.toggle-round2 + label:after {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}

input.toggle-round2:checked + label:before {
  background-color: #75DBF0;
}
input.toggle-round2:checked + label:after {
  margin-top: 60px;
}

Записан

Как задать класс стиля для чекбоксов - RS Form!

Новости Joomla

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 SM WT CDEK аддон доставки для JoomShopping.

dimochkasainr

Как задать класс стиля для чекбоксов

Ilhom666

Re: Как задать класс стиля для чекбоксов

dimochkasainr

Re: Как задать класс стиля для чекбоксов

Похожие темы