Entradas deshabilitadas de CSS puro

En este artículo, veremos cómo deshabilitar el campo de entrada en Pure CSS. En algunos casos, cuando le pedimos a alguien que complete un formulario, algunas cosas se activan y algunas cosas se deshabilitan para sus elecciones anteriores. En ese caso, también podemos usar HTML deshabilitado en Pure CSS. Este atributo funciona con otros tipos de entrada como radio, casilla de verificación, número, texto, etc. Consulte el artículo Botones CSS puros para obtener más detalles.

Sintaxis:

<tag disabled></tag>

Ejemplo 1: En este ejemplo, usaremos el atributo disabled para deshabilitar el nombre de usuario archivado en el formulario.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Pure CSS Required Input</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 Disabled Input
    </strong>
    <form action="">
        Username:
        <input type="text" name="username" disabled="">
        <br><br>
        Password:
        <input type="password" name="password">
        <br>
        <input type="submit">
    </form>
</body>
 
</html>

Producción:

Ejemplo 2: para marcar un botón como deshabilitado, agregue «pure-button-disabled» con class pure-button. También puede usar el atributo deshabilitado directamente.

Sintaxis:

<button class="pure-button pure-button-disabled">
  Disabled Button1
</button>  

<button class="pure-button" disabled> 
  Disabled Button2
</button>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <!--Import Pure Css files-->
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous" />
</head>
 
<body style="text-align: center">
    <h1>GeeksforGeeks</h1>
    <strong> Pure CSS Disabled Input </strong>
    <form action="">
        Username:
        <input type="text" name="username" />
 
        Password:
        <input type="password" name="password" />
 
        <input type="submit"
            class="pure-button" disabled="" />
    </form>
</body>
 
</html>

Producción:

Ejemplo 3: En este ejemplo, pondremos el atributo deshabilitado para el tipo de entrada como radio.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Pure CSS Required Input</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 Disabled Input </strong>
    <form action="">
        Without clicking the Radio button:
        <input type="radio"
            name="radiocheck" required="" />
 
        <input type="radio"
            name="radiocheck" disabled="" />
    </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

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta