Casillas de verificación y botones de radio CSS puro

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *