0 Пользователей и 1 Гость просматривают эту тему.
  • 2 Ответов
  • 896 Просмотров
*

dimochkasainr

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

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

dimochkasainr

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Извиняюсь заранее за тупость. Но как я все это пропишу через один стиль


Код
.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;
}
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Добавить в label класс

Автор seffpapy

Ответов: 0
Просмотров: 1035
Последний ответ 12.07.2015, 20:57:16
от seffpapy