En Pure CSS, no tenemos ningún diseño particular para las casillas de verificación y las entradas de tipo botón de opción. Pero podemos usar esos tipos de entradas usando las clases Pure CSS. Las clases mencionadas a continuación se utilizan para casillas de verificación y botones de opción.
- Casilla de verificación: para usar casillas de verificación, podemos aplicar la etiqueta de entrada dentro de una etiqueta de etiqueta y usar la clase de casilla de verificación pura dentro de la etiqueta de etiqueta.
- Botón de radio: para usar casillas de verificación, podemos aplicar la etiqueta de entrada dentro de una etiqueta de etiqueta y usar la clase de radio pura dentro de la etiqueta de etiqueta.
Ejemplo 1: En este ejemplo, veremos la casilla de verificación de Pure CSS. El siguiente ejemplo ilustra la casilla de verificación y el botón de opción en CSS puro.
HTML
<!DOCTYPE html> <html> <head> <title>Pure CSS Checkbox</title> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1>GeeksforGeeks</h1> <strong> Pure CSS Checkbox </strong> <form class="pure-form pure-form-stacked"> <fieldset> <strong> GeeksforGeeks is the best platform to get recognation </strong> <label class="pure-checkbox"> <input type="checkbox" id="multi-terms" /> I agreed with the statement. <button type="submit" class="pure-button pure-button-primary"> Subscribe </button> </fieldset> </form> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, veremos los botones de radio.
HTML
<!DOCTYPE html> <html> <head> <title>Pure CSS Radio Button</title> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1>GeeksforGeeks</h1> <strong> Pure CSS Radio Button </strong> <form class="pure-form pure-form-stacked"> <fieldset> <strong> GeeksforGeeks is the best platform to get recognation </strong> <label for="option-two" class="pure-radio"> <input id="option-two" type="radio" name="gfg" checked> Agree </label> <label for="option-three" class="pure-radio"> <input id="option-three" type="radio" name="gfg" > Disagree </label> <button type="submit" class="pure-button pure-button-primary"> Subscribe </button> </fieldset> </form> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA