Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

Добрый день, не могу допетрить) как добавить 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, 13:56   #2
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 362
Репутация: -23
По умолчанию

Сделал так
Код:

label[for*="box-11"]:before{
  background: #000;

Добавляю фон по атрибуту, а не по классу.
пример
__________________
Еду медленно, но верно!

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


00:51.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru