1

Tengo una tabla a la cual le aplico un hover al tr que esta dentro del tbody, con este css eso si me funciona

tbody > tr:hover

pero quiero que al aplicarse el hover sobre el tr cambiar el border de un input type radio que esta dentro del td pero aun no logro que se aplique ese border-color, ya eh intentado varios ejemplos que eh visto en internet pero aun no logro que eso pase, probablemente porque los que eh encontrado no son css para input type radio que estén dentro de una tabla. Entonces alguien podría ayudarme con lo que quiero hacer.

Esta es la tabla que tengo ahorita

He intentado estos estilos cabe aclarar que no soy bueno en css

tbody > tr:hover{
  /*background-color:#F9FAFB;*/
  input[type=radio]{
    border-color: #1C5B8E;
  }
}

tbody > tr:hover input[type=radio]{
      border-color: #1C5B8E;
}

1
  • No puedes cambiar el color de un RadioButton ni un Checkbox, tienes que hacer tu propio elemento, mira esta página para que veas como lograrlo
    – TheVicShow
    el 7 ene. 2022 a las 21:09

1 respuesta 1

1

El input radio no se puede modificar puesto que es nativo de cada sistema/navegador; sin embargo, lo que sí puedes hacer es agregar algo por encima que simule el borde que buscas:

tr:hover > td input[type='radio']::after {
   width: 15px;
   height: 15px;
   position: relative;
   background: transparent;
   border: 1px solid red;
   border-radius: 15px;
   transform: scale(0.8);
   top: -2px;
   left: -2px;
   content: "";
   display: inline-block;
}

table{
    width: 80%;
    margin: 20px auto;
    text-align: center;
    border-collapse: collapse;
}

thead{
    background: #ddd;
}

td, th{
    padding: 15px;
}

.darker{
    background: #bbb;
}
<table>
        <thead>
            <th></th>
            <th>Talla</th>
            <th>Cintura</th>
            <th>Cadera</th>
            <th>Pecho</th>
        </thead>
        <tbody>
            <tr class="darker">
                <td></td>
                <td>EG</td>
                <td>78 a 89</td>
                <td>78 a 89</td>
                <td>78 a 89</td>
            </tr>
            <tr class="darker">
                <td></td>
                <td>G</td>
                <td>67 a 87</td>
                <td>67 a 87</td>
                <td>67 a 87</td>
            </tr>
            <tr>
                <td><input type="radio" name="talla" id=""></td>
                <td>M</td>
                <td>34 a 67</td>
                <td>34 a 67</td>
                <td>34 a 67</td>
            </tr>
            <tr>
                <td><input type="radio" name="talla" id=""></td>
                <td>CH</td>
                <td>23 a 45</td>
                <td>23 a 45</td>
                <td>23 a 45</td>
            </tr>
        </tbody>
    </table>

En este caso creé un círculo por encima del input type="radio", el fondo es transparente pero el borde sí es visible al hacer :Hover

Edit: Otra forma de cambiar la apariencia del checkbox sería mediante la propiedad appearance que permite cambiar entre modelos nativos de un input (cambiar la apariencia de un input type="radio" por la de un input type="checkbox", entre otros); la cuestión es que appearance no es recomendado usarlo, tal como lo dice la MDN:

No utilizar esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave none no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.

De todas maneras, este es el resultado de usar appearance para hacer desaparecer el input type="radio" y darle un nuevo estilo:

input[type='radio']{
   appearance: none;
   border-radius: 50%;
   border: 2px solid #33f;
   width: 15px;
   height: 15px;
}

tr:hover > td input[type='radio']::after{
    display: inline-block;
    content: "";
    position: relative;
    height: 7px;
    width: 7px;
    background: transparent;
    border:1px solid blue;
    border-radius: 50%;
    top: -2px;
    left: 1px;
}

input[type="radio"]:checked::after{
    display: inline-block;
    content: "";
    position: relative;
    height: 7px;
    width: 7px;
    background: blue;
    border:1px solid blue;
    border-radius: 50%;
    top: -2px;
    left: 1px;
}

table{
    width: 80%;
    margin: 20px auto;
    text-align: center;
    border-collapse: collapse;
}

thead{
    background: #ddd;
}

td, th{
    padding: 15px;
}

.darker{
    background: #bbb;
}
<table>
        <thead>
            <th></th>
            <th>Talla</th>
            <th>Cintura</th>
            <th>Cadera</th>
            <th>Pecho</th>
        </thead>
        <tbody>
            <tr class="darker">
                <td></td>
                <td>EG</td>
                <td>78 a 89</td>
                <td>78 a 89</td>
                <td>78 a 89</td>
            </tr>
            <tr class="darker">
                <td></td>
                <td>G</td>
                <td>67 a 87</td>
                <td>67 a 87</td>
                <td>67 a 87</td>
            </tr>
            <tr>
                <td><input type="radio" name="tallas" id=""></td>
                <td>M</td>
                <td>34 a 67</td>
                <td>34 a 67</td>
                <td>34 a 67</td>
            </tr>
            <tr>
                <td><input type="radio" name="tallas" checked id=""></td>
                <td>CH</td>
                <td>23 a 45</td>
                <td>23 a 45</td>
                <td>23 a 45</td>
            </tr>
        </tbody>
    </table>

1
  • Si eso es lo que estaba intentando ya pero me faltaban algunas propiedades y solo se mostraba una linea de color, gracias ya con eso pude mostrarla bien el 7 ene. 2022 a las 23:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.