Как изменить цвет кнопки при нажатии html - Исправление ошибок и поиск оптимальных решений проблем

I have the following buttons that change when hovering over them.

How do I set a background color when selecting one of the buttons without losing selection when I click elsewhere on the screen?

In the current way, clicking the button makes it the color you choose, but clicking another field of the screen returns to the original color.

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
}

button:hover {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<button id="scale-0" class="btn-scale-0">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3">&nbsp;3&nbsp;</button>

Pete

56.1k27 gold badges115 silver badges161 bronze badges

asked Nov 11, 2019 at 14:42

There is no possibility of achieving this without the use of JavaScript without experiencing unexpected side-effects.

If the visited state doesn’t matter or is even desired, please have a look at @Blazemonger’s answer.

CSS pseudo-classes focus and active are defined by losing its state when clicking elsewhere on the page.

JavaScript(+JQuery) solution:

$("#scale-0").click(function() {
  $("#scale-0").addClass('button-clicked');
});
$("#scale-1").click(function() {
  $("#scale-1").addClass('button-clicked');
});
$("#scale-2").click(function() {
  $("#scale-2").addClass('button-clicked');
});
$("#scale-3").click(function() {
  $("#scale-3").addClass('button-clicked');
});

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
}

button:hover{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

.button-clicked {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scale-0" class="btn-scale-0 btn">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1 btn">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2 btn">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3 btn">&nbsp;3&nbsp;</button>

answered Nov 11, 2019 at 14:55

dmuenstererdmuensterer

1,86410 silver badges24 bronze badges

If you don’t want to use javascript and your button click doesn’t post back, then I would change this so that it used radio buttons and labels instead (assuming only one can be selected at a time — if multiple can, then change the radio for a checkbox):

.scale {
  /* hide radio button */
  position: fixed;
  left: 100%;
  top: 100%;
}

.button {
  display:inline-block;
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: black;
  color: white;
}

.scale:checked + label {  
  /* selected styled */
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input id="scale0" class="scale" name="scale" type="radio" value="0" checked>
<label for="scale0" class="button">&nbsp;0&nbsp;</label>
<input id="scale1" class="scale" name="scale" type="radio" value="1">
<label for="scale1" class="button">&nbsp;1&nbsp;</label>
<input id="scale2" class="scale" name="scale" type="radio" value="2">
<label for="scale2" class="button">&nbsp;2&nbsp;</label>
<input id="scale3" class="scale" name="scale" type="radio" value="3">
<label for="scale3" class="button">&nbsp;3&nbsp;</label>

answered Nov 11, 2019 at 15:07

PetePete

56.1k27 gold badges115 silver badges161 bronze badges

I don’t think you can do this with buttons without using JavaScript to add a class or change the style.

However, you can do this with <a href> by adding a :visited style:

.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
  text-decoration:none;

}

.button:hover,.button:active,.button:visited{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

<a href="#scale-0" id="scale-0" class="button btn-scale-0">0</a>
<a href="#scale-1" id="scale-1" class="button btn-scale-1">1</a>
<a href="#scale-2" id="scale-2" class="button btn-scale-2">2</a>
<a href="#scale-3" id="scale-3" class="button btn-scale-3">3</a>

The downside is that they will remain black even if you leave the page and return (unless the user clears their browser history).

Here’s a second approach that uses invisible checkboxes instead of buttons. However, this also has a downside where the user can click the button again to undo the color change:

input[type=checkbox][id^=scale-] {
  display: none;
}
.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;

}
input[type=checkbox][id^=scale-]:checked + .button,
.button:hover,
.button:active,
.button:visited {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input type="checkbox" id="scale-0"><label for="scale-0" class="button btn-scale-0">0</label>
<input type="checkbox" id="scale-1"><label for="scale-1" class="button btn-scale-1">1</label>
<input type="checkbox" id="scale-2"><label for="scale-2" class="button btn-scale-2">2</label>
<input type="checkbox" id="scale-3"><label for="scale-3" class="button btn-scale-3">3</label>

answered Nov 11, 2019 at 14:55

BlazemongerBlazemonger

89.3k26 gold badges138 silver badges179 bronze badges

Источник

I have the following buttons that change when hovering over them.

How do I set a background color when selecting one of the buttons without losing selection when I click elsewhere on the screen?

In the current way, clicking the button makes it the color you choose, but clicking another field of the screen returns to the original color.

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
}

button:hover {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<button id="scale-0" class="btn-scale-0">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3">&nbsp;3&nbsp;</button>

Pete

56.1k27 gold badges115 silver badges161 bronze badges

asked Nov 11, 2019 at 14:42

There is no possibility of achieving this without the use of JavaScript without experiencing unexpected side-effects.

If the visited state doesn’t matter or is even desired, please have a look at @Blazemonger’s answer.

CSS pseudo-classes focus and active are defined by losing its state when clicking elsewhere on the page.

JavaScript(+JQuery) solution:

$("#scale-0").click(function() {
  $("#scale-0").addClass('button-clicked');
});
$("#scale-1").click(function() {
  $("#scale-1").addClass('button-clicked');
});
$("#scale-2").click(function() {
  $("#scale-2").addClass('button-clicked');
});
$("#scale-3").click(function() {
  $("#scale-3").addClass('button-clicked');
});

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
}

button:hover{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

.button-clicked {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scale-0" class="btn-scale-0 btn">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1 btn">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2 btn">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3 btn">&nbsp;3&nbsp;</button>

answered Nov 11, 2019 at 14:55

dmuenstererdmuensterer

1,86410 silver badges24 bronze badges

.scale {
  /* hide radio button */
  position: fixed;
  left: 100%;
  top: 100%;
}

.button {
  display:inline-block;
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: black;
  color: white;
}

.scale:checked + label {  
  /* selected styled */
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input id="scale0" class="scale" name="scale" type="radio" value="0" checked>
<label for="scale0" class="button">&nbsp;0&nbsp;</label>
<input id="scale1" class="scale" name="scale" type="radio" value="1">
<label for="scale1" class="button">&nbsp;1&nbsp;</label>
<input id="scale2" class="scale" name="scale" type="radio" value="2">
<label for="scale2" class="button">&nbsp;2&nbsp;</label>
<input id="scale3" class="scale" name="scale" type="radio" value="3">
<label for="scale3" class="button">&nbsp;3&nbsp;</label>

answered Nov 11, 2019 at 15:07

PetePete

56.1k27 gold badges115 silver badges161 bronze badges

I don’t think you can do this with buttons without using JavaScript to add a class or change the style.

However, you can do this with <a href> by adding a :visited style:

.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
  text-decoration:none;

}

.button:hover,.button:active,.button:visited{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

<a href="#scale-0" id="scale-0" class="button btn-scale-0">0</a>
<a href="#scale-1" id="scale-1" class="button btn-scale-1">1</a>
<a href="#scale-2" id="scale-2" class="button btn-scale-2">2</a>
<a href="#scale-3" id="scale-3" class="button btn-scale-3">3</a>

The downside is that they will remain black even if you leave the page and return (unless the user clears their browser history).

Here’s a second approach that uses invisible checkboxes instead of buttons. However, this also has a downside where the user can click the button again to undo the color change:

input[type=checkbox][id^=scale-] {
  display: none;
}
.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;

}
input[type=checkbox][id^=scale-]:checked + .button,
.button:hover,
.button:active,
.button:visited {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input type="checkbox" id="scale-0"><label for="scale-0" class="button btn-scale-0">0</label>
<input type="checkbox" id="scale-1"><label for="scale-1" class="button btn-scale-1">1</label>
<input type="checkbox" id="scale-2"><label for="scale-2" class="button btn-scale-2">2</label>
<input type="checkbox" id="scale-3"><label for="scale-3" class="button btn-scale-3">3</label>

answered Nov 11, 2019 at 14:55

BlazemongerBlazemonger

89.3k26 gold badges138 silver badges179 bronze badges

Источник

0 / 0 / 0

Регистрация: 17.05.2016

Сообщений: 8

Смена цвета кнопок при нажатии

22.12.2017, 22:21. Показов 40441. Ответов 3

Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку менялся задний фон но при нажатии на другую на ней также менялся задний фон а на старой о становился прежним. Жду помощи товарище

Миниатюры

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

Programming Эксперт 94731 / 64177 / 26122 Регистрация: 12.04.2006 Сообщений: 116,782	22.12.2017, 22:21
3

Богдан всепытный

10 / 18 / 4

Регистрация: 10.11.2017

Сообщений: 283

22.12.2017, 23:01

CSS

1
2
3

класс/id кнопки :active {
background-color: #цвет;
}

Fedor92

2960 / 2578 / 1068

Регистрация: 15.12.2012

Сообщений: 9,733

Записей в блоге: 11

22.12.2017, 23:51

Сообщение было отмечено Maroon_5 как решение

Решение

Не по теме:

Богдан Хакер, а Вы пробовали свой код?

Maroon_5, Вас какая реализация интересует на CSS или JS?

Вот реализация на CSS, немного топорно, но эффективно…

HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{list-style:none}
        label{display:inline-block; width:200px; height:40px; text-align:center; color:#000; font: 16px/40px Arial; font-weight:bold}
        input:checked~label{background:red; color:#fff}
        input[type="radio"]{
            display:none
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">
                <input type="radio" name="radio" id="radio1" checked>
                <label for="radio1">Item1</label>
            </a>
        </li>
        <li>
            <a href="">
                <input type="radio" name="radio" id="radio2">
                <label for="radio2">Item2</label>
            </a>
        </li>
        <li>
            <a href="">
                <input type="radio" name="radio" id="radio3">
                <label for="radio3">Item3</label>
            </a>
        </li>
    </ul>
</body>
</html>

За код не бить писал на коленке… Для таких целей конечно лучше юзать js при условии, если переходы из меню будут на внутренние страницы сайта…

0 / 0 / 0

Регистрация: 17.05.2016

Сообщений: 8

23.12.2017, 18:01

[ТС]

Спасибо, Уже решил с помощью JS)

Источник

В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

Теперь можно выполнять множество операций, которые раньше были немыслимы без применения JavaScript и изображений, например, скругленные углы, адаптивные шаблоны, модульные сетки, прозрачные цвета и многое другое.

Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.

В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для «обнаружения» нажатия с помощью только CSS без JavaScript.

demo sourse

Примечание

Описанные способы не предназначены для «реальной жизни». Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока — прикоснуться к границам возможностей CSS.

Используем чекбокс

Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.

Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.

HTML

<input type="checkbox">
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

.to-be-changed {
    color: black;
}
 
input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

Метод основан на использовании псевдо-класса :checked и селектора ~. Обратите внимание, что он будет работать и с селектором +. Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.

Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:

<input type="checkbox" id="toggle">
<label for="toggle">Нажми меня!</label>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

Итак, мы прячем чекбокс и используем метку для реагирования на событие click:

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
 
label {
    display: block;
    background: #08C;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: white;
    font-weight: bold;
}
 
input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно.

(Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный — применение display:none.)

Плюсы

Бинарный, есть только два состояния — отмечен или не отмечен
Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие)

Минусы

Элементы должны иметь общего предка
Требуется дополнительная разметка HTML (input, label и так далее)
Требуется дополнительные действия для работы на мобильных браузерах

Способ с :target

Есть другой способ с использованием псевдо-класса :target. Данный псевдо-класс похож на псевдо-класс :hover тем, что соответствует только определенным условиям.

Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

HTML

<a href="#id">Нажми меня!</a>
<p id="id" class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

.to-be-changed {
    color: black;
}
 
.to-be-changed:target {
    color: red;
}

При нажатии на ссылку (href="#id") изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target.

Плюсы

Простой код CSS
Отлично подходит для выделения разделов

Минусы

Мусор в истории браузера
Происходит прокручивание страницы
Требуется тег ссылки или операции с URL для включения хэштега
Можно воздействовать только на один элемент (так как ID является уникальным)
Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

Способ с :focus

Продолжим наш обзор способом с использованием другого псевдо-класса — :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

Когда вы находитесь на странице, то с помощью клавиши табуляции можно перемещаться от одного элемента к другому. Такой метод очень удобен при работе с формами для перехода между элементами без использования мыши. Также метод применяется для навигации слабовидящими людьми по странице.

Важно, что некоторые элементы могут получать фокус ввода, например, ссылки, параграфы, поля ввода и многие другие. Вам только нужно установить для них атрибут tabindex с числовым значение для них.

HTML

<span tabindex="0">Нажми меня!</span>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

span:focus ~ .to-be-changed {
    color: red;
}

Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.

Плюсы

Очень простой код CSS и HTML
Отличная навигация

Минусы

Требуется либо элемент с фокусом, либо атрибут tabindex
Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

Способ с переходами

Вероятно, данный метод является самым «грязным» способом обработки события click в CSS.

Идея заключается в «хранении» стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.

HTML

<span>Нажми меня!</span>
<p class="to-be-changed">Здесь будет красный цвет. Или уже есть...</p>

CSS

.to-be-changed {
    transition: all 0s 9999999s;
}
 
span:active ~ .to-be-changed {
    transition: all 0s;
    color: red;
}

Задержка составляет примерно 116 дней. Не бесконечность, но некое ее подобие для наших условий. Поэтому изменения сохраняются и нет возврата к исходному состоянию.

Плюсы

Просто и изящно
Сохраняется состояние, даже если переход не закончился

Минусы

Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
Работает только со значениями, которые можно использовать с переходами
Нет способов возврата к исходному состоянию
Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

Источник

Смена цвета кнопок при нажатии

Решение

Примечание

Используем чекбокс

Плюсы

Минусы

Способ с :target

Плюсы

Минусы

Способ с :focus

Плюсы

Минусы

Способ с переходами

Плюсы

Минусы

Читайте также: