Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 02.06.2018, 06:40   #1
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию Добавить фон псевдоклассу

Добрый день, не могу допетрить) как добавить background с классом ff такой структуре
Код HTML:
<div class="col-6 text-center pt-3">
<form name="color">
   <h1 class="h5 font-weight-bold">Цвет материала</h1>
  <input type="checkbox" name="cat" id="box-7">
  <label for="box-7" class="ff"><p>красный</p></label>
  
  <input type="checkbox" name="cat" id="box-8">
  <label for="box-8"><p>оранжевый</p></label>

  <input type="checkbox" name="cat" id="box-9">
  <label for="box-9"><p>желтый</p></label>
  
  <input type="checkbox" name="cat" id="box-10">
  <label for="box-10"><p>зеленый</p></label>
  
  <input type="checkbox" name="cat" id="box-11">
  <label for="box-11"><p>синий</p></label>
  
  <input type="checkbox" name="cat" id="box-12">
  <label for="box-12"><p>фиолетовый</p></label>
</form>
</div>
Код:
input[name="cat"] { display: none; }

input[name="cat"] + label {
  display: block;
  position: relative;
  padding-left: 30px;
  margin: 10 0 10 0;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[name="cat"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #005aff;
  position: absolute;
  left: 80;
  top: 0;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

 input[name="cat"] + label:before {
	background: bisque;
}

input[name="cat"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 85px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
Ссылка на проект
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 02.06.2018, 12:56   #2
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Сделал так
Код:
label[for*="box-11"]:before{
  background: #000;
Добавляю фон по атрибуту, а не по классу.
пример
Еду медленно, но верно!

Последний раз редактировалось spoon100500; 02.06.2018 в 12:59.
spoon100500 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
добавить фон Давид93 HTML и CSS 2 02.10.2017 13:48
[Delphi] Игра Пятнашки. Помогите пожалуйста добавить окно "Вы выиграли", когда комбинация будет собрана правильно, и добавить кнопку "Новая игра" Аня20 Паскаль, Turbo Pascal, PascalABC.NET 1 02.06.2017 08:12
к элементам первой половины массива добавить минимум, а к элементам второй - добавить максимум specialist Паскаль, Turbo Pascal, PascalABC.NET 3 08.05.2011 01:46
Фон =Kroshka= Microsoft Office Word 2 23.07.2009 14:39
Фон Стаханов_Андрей Помощь студентам 5 04.03.2008 08:20