CSS disabled


Click Here And Get This Posted To YOU In PDF Format

CSS disabled

Introduction to CSS disabled

The disabled is a selector in CSS, which is used to disabling the HTML elements. This disabled selector mostly works on form elements like text areas, buttons, checkboxes, drop-down boxes, etc.

Real Time Example: Let, suppose we are filling a form with all our credentials like name, mobile number, Employee number, etc. Once we have entered all details it will ask for confirmation to submit the details. Once we submitted not all the details are going to allow for updating. The employee number is disabled to update because it is unique. Automatically it is disabled. In this kind of situation, we have used disabled selectors in CSS.

How Does disabled Done in CSS?

As we discussed disabled done on form pages in HTML. We can disable the buttons, text fields, checkboxes, drop-down boxes, etc. by using the disabled selector on required HTML form elements.

Syntax:

input[type=text]:disabled {
//CSS declarations
}
<form action=””>
Country: <input type=”text” disabled=”disabled” value=”Pakistan”>
</form>

Examples to Implement of CSS disabled

Below are the examples:

Example #1 – Field disabled

Code:

<!DOCTYPE html>
<html>
<head>
<title>disabled selector</title>
<style>
h1 {
color:orange;
}
input[type=text]:enabled {
background: lightgray;
}
input[type=text]:disabled {
background: red;
font-size: 20px;
}
input {
margin-top:10px;
border:1px solid brown;
font-size: 20px;
}
body {
text-align:center;
}
p
{
color: brown;
font-size: 22px;
border: 2px ridge blue;
}
label
{
font-size: 20px;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Disabled Demo for Text Field</h1>
<p>
Let suppose I am filling a form with all my credentials like my name, my mobile number, Employee number etc. Once I have entered all my details it will ask you for are sure confirm to submit the details. Once we submitted not all the details are going to allow for updating. Employee number is disabled to update because it is unique. Automatically is disabled. This kind of situation we have used disabled selector in CSS.
</p>
<form action=””>
<label>First Name :</label><input type=”text” value=”Paramesh”><br>
<label>Last Name: </label><input type=”text” value=”Nathi”><br>
<label>Address: </label><input type=”text” disabled=”disabled”
value=”Phanigiri”>
</form>
</body>
</html>

Output:

CSS Disabled Example 1

Explanation: As you can see in the output First Name and LastName can be editable but Address is disabled so we can edit it.

Example #2 – Disabled Button

Code:

<!DOCTYPE html>
<html>
<head>
<title>disabled selector</title>
<style>
h1 {
color:orange;
}
input[type=text]:enabled {
background: lightblue;
}
input[type=text]:disabled {
background: red;
font-size: 20px;
}
input {
margin-top:10px;
border:1px solid pink;
font-size: 20px;
}
body {
text-align:center;
}
p
{
color: red;
font-size: 22px;
border: 2px ridge green;
}
label
{
font-size: 20px;
color: blue;
font-weight: bold;
}
button
{
color: purple;
height: 30px;
width: 150px;
}
</style>
</head>
<body>
<h1>Disabled Demo for Button Field</h1>
<p>
Let suppose I am filling a form with all my credentials like my name, my mobile number, Employee number etc. Once I have entered all my details it will ask you for are sure confirm to submit the details. Once we submitted not all the details are going to allow for updating. Employee number is disabled to update because it is unique. Automatically is disabled. This kind of situation we have used disabled selector in CSS.
</p>
<form action=””>
<label>First Name :</label><input type=”text” value=”Amardeep”><br>
<label>Last Name: </label><input type=”text” value=”Patel”><br>
<label>Country: </label><input type=”text” value=”India”>
<br>
<br>
<button type=”button” disabled>Edit Details</button>
</form>
</body>
lt;/html>

Output:

CSS Disabled Example 2

Explanation: As you can see in the output First Name and LastName can be editable but isbutton disabled so we can’t edit it.

Example #3 – Text Area disabled

Code:

<!DOCTYPE html>
<html>
<head>
<title>disabled selector</title>
<style>
h1 {
color:red;
}
input[type=text]:enabled {
background: lightgreen;
}
input[type=text]:disabled {
background: red;
font-size: 20px;
}
input {
margin-top:10px;
border:1px solid red;
font-size: 20px;
}
body {
text-align:center;
}
p
{
color: fuchsia;
font-size: 22px;
border: 2px ridge navy;
}
label
{
font-size: 20px;
color: orange;
font-weight: bold;
}
button
{
color: red;
height: 30px;
width: 150px;
}
</style>
</head>
<body>
<h1>Disabled Demo for Button Field</h1>
<p>
Let suppose I am filling a form with all my credentials like my name, my mobile number, Employee number etc. Once I have entered all my details it will ask you for are sure confirm to submit the details. Once we submitted not all the details are going to allow for updating. Employee number is disabled to update because it is unique. Automatically is disabled. This kind of situation we have used disabled selector in CSS.
</p>
<form action=””>
<label>Name :</label><input type=”text” value=”Paramesh”><br>
<label>Email: </label><input type=”text” value=”naathi@gmail.com”><br>
<label>Country: </label><input type=”text” value=”India”>
<br>
<br>
<label>comments:</label>
<textarea id=”textArea” rows=”4″ cols=”50″ disabled>Hi, I am Paramesh. I am disabled.</textarea>
<br>
<br>
<button type=”button”>Edit Details</button>
</form>
</body>
</html>

Output:

Text Area Example 3

Explanation: As you can see we can’t edit text area as it is disabled.

Conclusion

Disabled in CSS is a selector which used to disable the elements and style disabled elements. We can use this disabled selector on form fields like buttons, text area, button, text field etc.

Recommended Articles

This is a guide to CSS disabled. Here we discuss a brief overview on CSS disabled and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –

Uses of CSS in Technology
Introduction to Top 6 Advantages of CSS
Guide to Top 10 CSS Interview Questions
Some Property of Button in CSS

The post CSS disabled appeared first on EDUCBA.

Read more: educba.com

What's Your Reaction?

Cry Cry
0
Cry
Cute Cute
0
Cute
Damn Damn
0
Damn
Dislike Dislike
0
Dislike
Like Like
0
Like
Lol Lol
0
Lol
Love Love
0
Love
Win Win
0
Win
WTF WTF
0
WTF

Comments 0

Your email address will not be published. Required fields are marked *

CSS disabled

log in

Become a part of our community!

Captcha!
Don't have an account?
sign up

reset password

Back to
log in

sign up

Join BoomBox Community

Captcha!
Back to
log in
Choose A Format
Personality quiz
Trivia quiz
Poll
Story
List
Open List
Ranked List
Meme
Video
Audio
Image