Pure CSS Disabled Inputs - GeeksforGeeks

28 Feb, 2022
In this article, we will see how to disable the input field in Pure CSS. In some cases, when we ask someone to fill a form few things are activated as well a few things are disabled for their previous choices. In that case, we can use HTML disabled in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, text, etc. Please refer to the Pure CSS Buttons article for further details.
Syntax:
<tag disabled></tag>
Example 1: In this example, we will use the disabled attribute to disable the username filed in the form.
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>
Output:
Example 2: To mark a button as disabled, add “pure-button-disabled” with class pure-button. You can also use the disabled attribute directly.
Syntax:
<button class="pure-button pure-button-disabled">
  Disabled Button1
</button>  

<button class="pure-button" disabled> 
  Disabled Button2
</button>
Example:
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>
Output:
Example 3:  In this example, we will put the disabled attribute for the input type as 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>
Output:
varshagumber28
CSS-Questions
Picked
Pure CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?