0
137
Viewscómo crear un botón de opción de Entrada personalizado que tenga atributos dentro de él
Estoy usando componentes con estilo de reacción como estilo en mi proyecto, déjame señalar lo que realmente siento que no es correcto es el texto entre el cuadro y también necesito darle estilo si está marcado
que he probado?
Creé un div externo y dentro de él puse una entrada de radio que no muestro y pensé que podía diseñar el elemento externo, pero eso hace que no se pueda hacer clic en el botón de opción. Cualquier solución a este problema si presenta una solución específica de reacción será excelente.
.radio__input{ display:none; } .radiobox{ width:60px; height:60px; border:1px solid black; } //i want the div radiobox to styled when one radiobox is selected <div class="radiobox"> <input type="radio" class="radio__input" name="radio"/> XS </div> <div class="radiobox"> <input type="radio" class="radio__input" name="radio"/> S </div> 
2 answers
Answer question0
Debe mantener el botón de opción en algún lugar, en aras de la accesibilidad, y aún poder seleccionarlo.
Una solución común para aplicar estilo a los botones de opción es aplicar estilo a su elemento <label> en su lugar y usar el combinador de hermanos adyacentes de CSS para aplicarle estilo según el estado del botón de opción.
Se deben tener en cuenta algunas cosas más para que el componente sea accesible para los usuarios que necesitan tecnología de asistencia:
- también debe usar
<fieldset>para proporcionar un nombre accesible para el grupo de opciones, aunque "Verde" podría explicarse por sí mismo - el foco debe ser visible, y dado que está ocultando el botón de opción en sí, una solución es mostrarlo en el conjunto de campos
- cada botón de radio aún necesita un nombre accesible, así que agregue texto oculto también dentro de las etiquetas
.color-options { display: flex; padding: .2em; gap: .4em; } .color-options:focus-within { outline: .2em solid blue; } .color-option { width: 2em; height: 2em; } input:checked+.color-option { outline: .2em solid darkseagreen; } /* kudos to Scott O'Hara https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } <fieldset> <legend>Color</legend> <div class="color-options"> <input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden"> <label class="color-option" style="background-color: gray" for="color-gray"> <span class="visually-hidden"> Gray </span> </label> <input type="radio" name="color" value="black" id="color-black" class="visually-hidden"> <label class="color-option" style="background-color: black" for="color-black"> <span class="visually-hidden"> Black </span> </label> <input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden"> <label class="color-option" style="background-color: darkgreen" for="color-darkgreen"> <span class="visually-hidden"> Dark Green </span> </label> </div> </fieldset>0
Utilicé identificaciones únicas para cada botón de opción, que es utilizada por el atributo for del elemento <label> para asociar las etiquetas con los botones de opción. Entonces ahora la entrada también se verifica cuando se hace clic en la etiqueta. Luego acabo de diseñar el estado inicial y marcado. Pero recuerde que solo puede diseñar elementos de acuerdo con el estado marcado de una entrada cuando son hermanos o hijos. No puede acceder al elemento principal como en este caso el contenedor .radiobox con CSS puro.
.radiobox { position: relative; width: 50px; height: 50px; border: 1px solid; display: flex; justify-content: center; align-items: center; display: inline-block; } input[type="radio"] { appearance: none; } input[type="radio"] + label { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } input[type="radio"]:checked + label { background: blue; } <div class="radiobox"> <input type="radio" id="s" name="radio"/> <label for="s">S</label> </div> <div class="radiobox"> <input type="radio" id="m" name="radio"/> <label for="m">M</label> </div>