Para el formulario en esta página: http://16q.47c.myftpupload.com/ obtener una cita / Quiero hacer que los botones "Ida y vuelta" / "One Way", al hacer clic, mantengan su fondo rojo.

Utilicé Gravity Forms para construir el formulario y personalicé el CSS para que se viera de esa manera. Esos 2 "botones" son en realidad botones de radio.

¡No tengo acceso al HTML, por lo que una solución solo para CSS sería genial (a menos que sepa cómo editar el HTML de un formulario de gravedad)!

Agradezco la ayuda de antemano :)

1
Rhami 8 sep. 2018 a las 07:54

3 respuestas

La mejor respuesta

Dado que el botón de radio se selecciona cuando hace clic en el botón, puede usar una casilla de verificación de pirateo (pirateo de botón de radio)

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;
}

Esto seleccionará el próximo hermano con la etiqueta de una entrada con nombre = "input_11" y cambiará su color de fondo. Estoy usando name = "input_11" porque eso es lo que tenía el botón de radio en su sitio web.

0
Chris Li 8 sep. 2018 a las 17:48

Si puede tener acceso al CSS, intente agregar la opción del botón de radio :checked y tenga el background-color en rojo.

Solo vea el fragmento de código e intente hacerlo.

/*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
chintuyadavsara 8 sep. 2018 a las 05:21

Solo tiene que agregar :focus a cualquier clase de CSS que haya utilizado para esos botones de radio, siga el ejemplo que se muestra a continuación,

.btnbtn{
background-color:blue;
}

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

Esto debería funcionar perfectamente.

1
Neeraj Kamat 8 sep. 2018 a las 05:17