Необходимо чтобы при нажатии на кнопку менялся цвет квадрата
Слева три кнопки. Я хочу чтобы нажимая на одну из этих кнопок цвет квадрата менялся на тот, который указан в самой кнопке. Каким должен быть код Javascript чтобы условия выполнялись. Желательно написать готовый код с объяснением каждой строки ( я сравнительно недавно заинтересовался языком программирования JS ). Ссылки на нужную информацию и комментарии будут очень кстати. Свою ссылку на исходный код html и css в песочнице codepen прикрепляю ниже.
.squere < position: absolute; margin-left: 55%; margin-top: 2%; background-color: white; padding: 5%; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.85), 0 10px 10px rgba(0, 0, 0, 0.32); background-color: white; >.btn1 < margin-left: 8%; position: relative; margin-left: 8%; box-shadow: 0 5px 0 #3C93D5; display: inline-block; border-radius: 5px; padding: 10px 25px; font-size: 22px; text-decoration: none; background: #55acee; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); transition: .3s; >.red < float: right; padding-left: 15px; color: red; >.btn2 < margin-left: 8%; position: relative; margin-left: 8%; box-shadow: 0 5px 0 #3C93D5; display: inline-block; border-radius: 5px; padding: 10px 25px; font-size: 22px; text-decoration: none; background: #55acee; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); transition: .3s; >.yellow < float: right; padding-left: 15px; color: yellow; >.btn3 < position: relative; margin-left: 8%; box-shadow: 0 5px 0 #3C93D5; display: inline-block; border-radius: 5px; padding: 10px 25px; font-size: 22px; text-decoration: none; background: #55acee; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); transition: .3s; >.green < float: right; padding-left: 15px; color: green; >.cnopocki < position: absolute; margin-left: 15%; margin-top: 0.8%; background-color: #006363; width: 430px; height: 220px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.85), 0 10px 10px rgba(0, 0, 0, 0.32); >body
Цвет
Отслеживать
27.1k 3 3 золотых знака 23 23 серебряных знака 48 48 бронзовых знаков
задан 2 янв 2021 в 12:44
3 4 4 бронзовых знака
2 янв 2021 в 12:47
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
let btns = document.querySelectorAll(".btn"); // Собирает нумерованный список всех кнопок с // btns[0] — первая кнопка, btns[1] — вторая кнопка, btns[i] — i-тая кнопка. let last_clicked = null; // Пусть ссылка на последнюю кликнутую кнопку хранится в переменной. for (let i = 0; i < btns.length; i++) < // Перебирает кнопки и на всех добавляет обработчик события, // Функция set_square_color будет запускаться при клике. btns[i].addEventListener("click", set_square_color); >function set_square_color() < let curr_clicked = this; // Обработчик клика привязывет ключевое слово `this` к текущей кликнутой кнопке. let box = document.querySelector(".square"); // querySelectorAll дает список элементов, // querySelector — Первый подходящий элемент на странице. box.style.backgroundColor = curr_clicked.dataset.color; // в JS тире из стилей (background-color) заменяется большой буквой. // data-color → dataset.color, data-bubu → dataset.bubu // Можно назначить элементам кастомные атрибуты, и так получить к ним доступ. /*** Последующий кусок можно выкинуть */ if (last_clicked) < // Есть предыдущая кликнутая кнопка? let txt = last_clicked.firstChild.textContent; // firstChild — текстовый узел `Поменяй квадрат на` last_clicked.firstChild.textContent = txt.replace("Поменял", "Поменяй"); >let txt = curr_clicked.firstChild.textContent; curr_clicked.firstChild.textContent = txt.replace("Поменяй", "Поменял"); last_clicked = curr_clicked; // Ссылка на текущую кликнутую кнопку сохраняется во внешнюю переменную. >.wrap < width: 430px; height: 220px; margin: 10px; padding: 10px; background-color: #066; box-shadow: 0 14px 28px #000d, 0 10px 10px #0002; >.square < width: 40px; height: 40px; margin: 10px; padding: 5px; background-color: white; box-shadow: 0 14px 28px #000d, 0 10px 10px #0002; >.btn < position: relative; display: inline-block; width: 90%; margin: 5px; padding: 10px 25px; border-radius: 5px; font-size: 22px; background-color: #5be; box-shadow: 0 14px 28px #0004, 0 10px 10px #0004; cursor: pointer; >.red < color: red; >.yellow < color: yellow; >.green
Цвет Отслеживать
ответ дан 2 янв 2021 в 13:29
OPTIMUS PRIME OPTIMUS PRIME
27.1k 3 3 золотых знака 23 23 серебряных знака 48 48 бронзовых знаков
Как изменить цвет ссылки в HTML
В силу тех или иных обстоятельств возникает надобность изменить цвет ссылки. Это достаточно распространенный случай, когда ссылки на сайте режут глаз или наоборот малозаметны. В сегодняшней небольшой публикации вы узнаете, как просто изменить цвет ссылки.
В HTML параметры цвета задаются стандартно цифрами в шестнадцатеричном коде, в виде #rrggbb, где каждая по отдельности буква отвечает за красную (r или red), зеленую (g или green) и синюю (b или blue) составляющую. Для каждого цвета применяется шестнадцатеричное значение от 00 до FF, что отвечает диапазону от 0 до 255 в десятичном исчислении. Далее эти значения соединяются в одно шестизначное число, в котором некоторые цифры могут быть заменены латинскими буквами. Использование символа решетка (#) является обязательным и он должен располагаться вначале заданного параметра цвета.
Помимо использования палитры всевозможных цветов, не исключено применение ключевых слов, таких как: yellow, gray, green и т.п.
Как поменять цвет ссылки в HTML
Линки в HTML выглядят следующим образом:
Для того чтобы задать ссылке определенные параметры, используется свойство style. Для того чтобы свойство сработало его необходимо добавить внутрь тега. Вот как это будет выглядеть на примере:
Так как все ссылки по умолчанию имеют подчеркивание в нашем примере мы его запретили, использовав свойство text-decoration: none
В независимости от цветового оформления сайта, цвет ссылок также установлен по умолчанию. Изначально все ссылки (за исключением некоторых) синего окраса. Для изменения этого параметра используется свойство color, после которого через двоеточие устанавливается цветовой код HTML.
Как изменить цвет ссылки в CSS
В отличии от HTML, средствами CSS выполнить эту задачу куда практичнее. Для того чтобы поменять цвет ссылок на всех страницах веб-проекта, используются следующие псевдоклассы, которые следует добавить к селектору a.
— a:active – активная ссылка;
— a:visited – ссылка, по которой осуществлялся визит;
— a:hover – ссылка при наведении мыши.
Для реализации задуманного создадим два файла.
Первым делом index.php:
CSS checkbox и стилизация
Иногда, когда мы смотрим на радиокнопки или input type checkbox , то у нас возникают неприятные ощущения. Кажется, что они выглядят ужасно. Но пока не посыпалась нецензурные слова, я попытаюсь избавить вас от этого чувства.
Сегодня мы будем работать только с кодом. Для начала сформируем его структуру:
//Radio //Checkbox
Если эта кнопка покажется вам некрасивой, не беспокойтесь. Так и должно быть, потому что все остальное мы сделаем при помощи CSS .
Первое что нужно сделать, это скрыть элемент, который генерирует саму некрасивую кнопку – тэг input . Мы все равно сможем нажимать ее, даже несмотря на то, что она скрыта. Как? Вложив input type checkbox в label .
Теперь, когда все стандартные и некрасивые переключатели скрыты, пришло время заняться созданием собственных, красивеньких.
Радиокнопка
Но сильно с оформлением не разгуляешься, так как остальные переключатели тоже должны работать корректно. Давайте просто слегка приукрасим их:
label input[type=»radio»] < display: none; >label input[type=»radio»] ~ span < position: relative; display: inline-block; padding: 3px 0 3px 25px; >label input[type=»radio»] ~ span:before < content: ""; position: absolute; display: block; width: 18px; height: 18px; background: #fff; margin-right: 5px; border: 1px solid #ccc; border-radius: 50%; left: 0; top: 0; box-sizing: border-box; transition: all 300ms ease-in-out; >label input[type=»radio»]:checked ~ span:before
На данный момент наша радиокнопка будет выглядеть следующим образом:
Гораздо привлекательней, не так ли?
Чекбокс (флажок)
Давайте начнем с простого HTML input type checkbox . Сейчас я хочу превратить переключатель, который вы видите на скриншоте, в нечто подобное:
label.spin input[type=»checkbox»] < display: none; /*hides ugly toggle*/ >label.spin input[type=»checkbox»] ~ span < position: relative; display: inline-block; padding: 3px 0 3px 25px; /*adds spacing on the left*/ >/*create our new toggle*/ label.spin input[type=»checkbox»] ~ span:before < content: "2713"; /*add a new check mark*/ text-align: center; font-size: 13px; position: absolute; display: block; width: 18px; height: 18px; background: #fff; color: #fff; margin-right: 5px; border: 1px solid #ccc; border-radius: 50%; left: 0; top: 0; box-sizing: border-box; transition: all 500ms ease-in-out; >/*if checked do this*/ label.spin input[type=»checkbox»]:checked ~ span:before
Действительно красивый переключатель!
Наверняка вы видели input type checkbox , в которых тумблер скользит слева направо при нажатии. Такого эффекта можно легко добиться при помощи CSS . Давайте попробуем.
Сначала создадим обычный чекбокс без установленного флажка. Сейчас вы уже знаете, что нам потребуется скрыть стандартный переключатель:
label input[type=»checkbox»]
Затем добавьте немного пространства с левой стороны при помощи свойства padding . После этого задайте чекбоксу относительное позиционирование, так как нам нужно, чтобы он содержал в себе и все остальные элементы внутри span :
label input[type=»checkbox»] ~ span
Перейдем к стилизации CSS input type checkbox при помощи псевдоэлементов :before и :after . Так сгенерированным CSS-кодом будет проще управлять:
label input[type=»checkbox»] ~ span:before, label.slide input[type=»checkbox»] ~ span:after
Этот код приведет к появлению элемента, похожего на блок. Так как это свойство установлено для обоих псевдоэлементов, то они будут выглядеть одинаково, и расположены один поверх другого.
Пришло время немного украсить эти псевдоэлементы. :after будет выступать в роли фона, а :before отвечать за переключение ползунка. Давайте отредактируем ширину элемента, чтобы он стал больше. Также не забудьте добавить inset shadow , чтобы он выглядел как бы вдавленным. Кроме этого не забываем про красный фон, который будет интуитивно указывать на “ выключенный ” режим:
label input[type=»checkbox»] ~ span:before
Что касается :before , то нам нужно сделать так, чтобы элемент стал круглым, а также немного « приподнять » его при помощи эффекта box-shadow :
label.slide input[type=»checkbox»] ~ span:after
Во « включенном » режиме нам нужно сместить ползунок HTML input type checkbox в сторону, и изменить цвет фона с красного на оттенок голубого:
label.slide input[type=»checkbox»]:checked ~ span:before < background: #29d; >label.slide input[type=»checkbox»]:checked ~ span:after
На этом все! Наши красивые чекбоксы и радиокнопки готовы!
Валентин Сейидов автор-переводчик статьи « Styling Radio and Check buttons with CSS »
Как изменить цвет checkbox css
Данный процесс осуществляется посредством скрытия стандартного элемента и создания с помощью CSS другого «поддельного», такого как мы хотим .
Но как же это будет работать, если стандартный input скрыть? Это можно выполнить благодаря тому, что в HTML переключить состояние checked можно не только с помощью самого элемента input , но и посредством связанного с ним label .
В HTML связывание label с input выполняется одним из 2 способов:
1. Посредством помещения элемента input в label :
2. Посредством задания элементу input атрибута id , а label – for с таким же значением как у id .
В этой статье мы подробно разберём шаги по кастомизации checkbox и radio , в которых label с input свяжем по 2 варианту. Создание «поддельного» чекбокса выполним с использованием псевдоэлемента ::before , который поместим в label . При этом никакие дополнительные элементы в разметку добавлять не будем.
Создание стильного чекбокса
Процесс замены стандартного вида чекбокса на кастомный осуществим посредством выполнения следующей последовательности шагов.
Шаг 1. Создадим разметку.
При создании разметки очень важно соблюдать последовательность расположения элементов. Это необходимо, потому что в зависимости от того, как они расположены мы будем составлять выражения для выбора элементов в CSS и назначать им стили.
В этом примере элемент label расположен после input . Связь label с input осуществляется посредством соответствия значения for элемента label с id элемента input .
В примере к элементу input добавлен класс custom-checkbox . Данный класс мы будем использовать при составлении селекторов и тем самым с помощью него определять элементы к которым следует добавить стилизованный чекбокс вместо обычного. Т.е. его присутствие или отсутствие будет определять с каким чекбоксом (со стандартным или поддельным) будет выводится элемент input с type=»checkbox» .
Шаг 2. Напишем стили для скрытия стандартного элемента input .
Мы не будем использовать display: none , а установим ему стили, с помощью которых уберём его из потока ( position: absolute ), поместим его ниже существующих элементов ( z-index: -1 ), а также сделаем его полностью прозрачным ( opacity: 0 ). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» checkbox или radio , когда он будет находиться в нём.
Шаг 3. Создадим поддельный чекбокс.
Создание «поддельного» чекбокса выполним с помощью псевдоэлемента ::before . Посредством CSS зададим ему размеры (в данном случае 1em x 1em ), а затем нарисуем его с помощью border: 1px solid #adb5bd . Свойства начинающие со слова background будут определять положение самого флажка (когда checkbox будет в состоянии checked ).
Первое правило необходимо для вертикального центрирования флажка и надписи к нему. Это действие в примере выполнено через CSS Flexbox.
Шаг 4. Создадим стили при нахождении элемента в состоянии checked .
В этом коде при получении элементом состояния checked применим к псевдоэлементу ::before находящемуся в label стили, посредством которых установим цвет границы, цвет фону и фоновую картинку (флажок) в формате svg.
Шаг 5. Добавим код для стилизации чекбокса при нахождении его в состояниях hover , active , focus и disabled .
Разработка кастомного переключателя
Стилизация переключателя ( input с type=»radio» ) выполняется аналогично, т.е. посредством тех же шагов которые мы применяли при кастомизации чекбокса.
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
Метод «Checkbox Hack»
Стоит заменить что в некоторых старых браузерах (например Safari) такой приём не работает и требует добавление атрибутов for у и id у чекбокса.
В зависимости от состояния чекбокса :checked , :disabled и :focus , следующему за ним элементу, например , можно задавать стили с помощью селектора « + ».
Сам чекбокс скрывается, но без использования display: none , что бы оставить функциональность фокуса.
По умолчанию, фокус появляется при клике на элемент, что не очень и нужно. Оставить выделение при фокусе только при нажатии клавиши Tab можно с помощью JQuery, добавляя класс focused родительскому элементу.
Пример №1
В первом примере понадобятся два изображения (обычный и отмеченный), для ускорения прорисовки можно использовать спрайты, но тогда не сделать плавную смену при переключении ( transition background ).
Стилизуем чекбоксы и радиокнопки с CSS3
Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Существует 2 типа элементов форм, которые очень трудно стилизовать под себя (особенно задать один стиль для всех платформ) — Windows, OS X, Linux по-своему отображают данные элементы.
HTML код
начнём мы с создания html документа со следующей структурой:
Радио кнопки
Чекбоксы
С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы . Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:
Стилизуем радиокнопки
В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:
Затем спрячем радио кнопку по её атрибуту:
Заменяем скрытый элемент псевдо классом :before.
Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.
На данном этапе наши элементы должны выглядеть вот так:
Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга • •, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ ? ✓.
В итоге, вот что у нас должно получиться:
Итоги
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим jQuery плагином.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/css3-checkbox-radio/
Перевел: Станислав Протасевич
Урок создан: 8 Марта 2013
Просмотров: 204774
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Стилизация флажков и переключателей с использованием CSS3
При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.
Итак, для начала добавим несколько обычных флажков и переключателей на форму:
Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:
Перед метками добавим стилизованные контейнеры для наших пользовательских элементов. Для флажков это будут квадраты с немного закругленными для красоты краями, а для переключателей — просто небольшие круги:
Теперь добавим индикаторы выбора. Для флажков это будут галки, для переключателей — заполненные цветом круги меньшего размера, чем сам контейнер. Для большего эффекта зададим также небольшую анимацию:
Чтобы изобразить знак галки, мы поворачиваем небольшой прямоугольник, две стороны которого окрашены в цвет, на 45 градусов против часовой стрелки.
Обратите внимание, что селекторы :before и :after позволяют добавлять содержание непосредственно до и после содержимого самой метки. Так как для меток мы задали относительное позиционирование (position: relative), то можем задавать контекстное абсолютное позиционирование для их содержимого.
Осталось скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в выбранном состоянии:
Добавим, что описанное здесь решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также, начиная с версии 9, и в Internet Explorer.
Похожие публикации:
- Как разместить объект по центру в css
- Как расположить блок в центре css
- Как расположить текст поверх картинки html css
- Как растянуть изображение css на всю ширину