Хотите, чтобы моя кнопка оставалась темной при нажатии - PullRequest
Новая
       7

Хотите, чтобы моя кнопка оставалась темной при нажатии

0 голосов
/ 08 сентября 2018

Для формы на этой странице: http://16q.47c.myftpupload.com/get-a-quote/ Я хочу, чтобы кнопки «Круглый ход» / «В одну сторону», при нажатии, сохраняли свой красный фон.

Я использовал Gravity Forms для создания формы и настроил CSS так, чтобы она выглядела так. Эти 2 «кнопки» на самом деле являются радио-кнопками.

У меня нет доступа к HTML, поэтому было бы неплохо исправить только CSS (если вы не знаете, как редактировать HTML-форму Gravity)!

Заранее признателен за помощь:)

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

Если вы можете иметь доступ к CSS, попробуйте добавить опцию переключателя :checked и установите background-color на красный.

Просто посмотрите фрагмент кода и попробуйте. 

/*https://codepen.io/kevinfarrugia/pen/pJZezE*/

.hungry .selection {
  margin-bottom: 1em;
}

.hungry .selection label {
  display: inline-block;
  width:8em;
  background-color: #42b4d6;
  border-radius: 6px;
  color: #ffffff;
  padding: 0.5em;
  cursor: pointer;
}

.hungry .selection label:hover {
  background-color: #5fc0dc;
}

.hungry .selection input[type=radio] {
  display: none;
}

.hungry .selection input[type=radio]:checked ~ label {
  background-color: #f1592a;
}
<div class="hungry">
  <div class="selection">
    <input id="pizza" name="hungry" type="radio">
    <label for="pizza">Pizza</label>
  </div>
  <div class="selection">
    <input id="burger" name="hungry" type="radio">
    <label for="burger">Burger + Chips</label>
  </div>
  <div class="selection">
    <input id="bread" name="hungry" type="radio">
    <label for="bread">Hobz biz-zejt!</label>
  </div>
</div>
0 голосов
/ 08 сентября 2018

Поскольку радио-кнопка выбирается, когда вы нажимаете кнопку, вы можете использовать хак с флажком (радио-хак) 

input[name="input_11"]:checked + #label_2_11_0,
input[name="input_11"]:checked + #label_2_11_1 {
  background-color: #8d181b !important;
  color: white !important;
}

это выберет следующего брата с меткой тега ввода с именем = "input_11" и изменит его цвет фона. Я использую name = "input_11", потому что это то, что радио-кнопка была на вашем сайте.

0 голосов
/ 08 сентября 2018

Вам просто нужно добавить :focus к тому классу css, который вы использовали для этих переключателей, следуйте приведенному ниже примеру 

.btnbtn{
background-color:blue;
}

.btnbtn:focus{
background-color:red;
}
<html>
<body>
<button class="btnbtn">abcd</button>
</body>
</html>

Это должно работать отлично.

...