Pure CSS Disabled Inputs

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.

Output:

👁 Image

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:

Output:

👁 Image

Example 3:  In this example, we will put the disabled attribute for the input type as radio.

Output:

👁 Image