Disable input with css

:disabled¶

Псевдо-класс :disabled находит любой отключенный элемент.

Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.

Синтаксис¶

/* Selects any disabled */ input:disabled  background: #ccc; > 

Спецификации¶

Примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

form action="#"> fieldset id="shipping"> legend>Shipping addresslegend> input type="text" placeholder="Name" /> input type="text" placeholder="Address" /> input type="text" placeholder="Zip Code" /> fieldset> br /> fieldset id="billing"> legend>Billing addresslegend> label for="billing_is_shipping">Same as shipping address:label> input type="checkbox" id="billing-checkbox" checked /> br /> input type="text" placeholder="Name" disabled /> input type="text" placeholder="Address" disabled /> input type="text" placeholder="Zip Code" disabled /> fieldset> form> 

input[type='text']:disabled  background: #ccc; > 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// Wait for the page to finish loading document.addEventListener( 'DOMContentLoaded', function()  // Attach `change` event listener to checkbox document.getElementById('billing-checkbox').onchange = toggleBilling >, false ) function toggleBilling()  // Select the billing text fields var billingItems = document.querySelectorAll('#billing input[type="text"]') // Toggle the billing text fields for (var i = 0; i  billingItems.length; i++)  billingItems[i].disabled = !billingItems[i].disabled > > 

Источник

How to Disable an Input Field Using CSS?

The input field is used to make forms and take input from the user. Users can fill the input field according to the input type. But sometimes, you must disable the input field to fulfil any precondition, such as selecting a checkbox. In that situation, you need to disable the input field.

In this guide, we will gain an understanding of how to disable the input field using CSS. So, Let’s begin!

How to Disable an Input Field Using CSS?

In CSS, events are disabled by using the “pointer-events” property. So, first, learn about the pointer-events property.

What is “pointer-events” CSS Property?

The “pointer-events” control how the HTML elements respond or behave to the touch event, such as click or tap events, active or hover states, and whether the cursor is visible or not.

Syntax
The syntax of pointer-events is given as follows:

The above mention property takes two values, such as “auto” and “none”:

• auto: It is used to perform default events.
• none: It is utilized to disable events.

Head towards the given example.

Example 1: Adding an Input Field Using CSS

In this example, firstly, we will create a div and add a heading and input field to it. Then, set the input type as “text” and set its value as “Enter Your Name”.

After that, move to the CSS and style the div by setting its background color as “rgb(184, 146, 99)” and height as “150px”.

The output of the above-described code is given below. Here, we can see that our input field is currently active and is accepting the input from the user:

Now, move to the next part in which we use the value of the “pointer-events” property as “none”.

Example 2: Disabling an Input Field Using CSS

We will now use “input” to access the element added in the HTML file and set the value of pointer-events as “none”:

Once you implement the above-stated property “pointer-events” with “none” value, the text of the input field will be non-editable which indicates that our input field is disabled:

That’s it! We have explained the method of disabling the input field using CSS.

Conclusion

To disable an input field in an HTML, the “pointer-events” property of the CSS is used. To do so, add an input field, and set the value of pointer-events as “none” to disable the input field. In this guide, we explain the method of disabling an input field using CSS and provide an example of it.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

:disabled

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can’t be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

Try it

Syntax

Examples

This example shows a basic shipping form. It uses the JavaScript change event to let the user enable/disable the billing fields.

HTML

form action="#"> fieldset id="shipping"> legend>Shipping addresslegend> input type="text" placeholder="Name" /> input type="text" placeholder="Address" /> input type="text" placeholder="Zip Code" /> fieldset> br /> fieldset id="billing"> legend>Billing addresslegend> label for="billing-checkbox">Same as shipping address:label> input type="checkbox" id="billing-checkbox" checked /> br /> input type="text" placeholder="Name" disabled /> input type="text" placeholder="Address" disabled /> input type="text" placeholder="Zip Code" disabled /> fieldset> form> 

CSS

input[type="text"]:disabled  background: #ccc; > 

JavaScript

// Wait for the page to finish loading document.addEventListener( "DOMContentLoaded", () =>  // Attach `change` event listener to checkbox document.getElementById("billing-checkbox").onchange = toggleBilling; >, false, ); function toggleBilling()  // Select the billing text fields const billingItems = document.querySelectorAll('#billing input[type="text"]'); // Toggle the billing text fields billingItems.forEach((item) =>  item.disabled = !item.disabled; >); > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

Disable a textbox using CSS

How to disable a textbox in CSS? Currently we are having a textbox in our view which can be enabled/disabled depending on a property in the model. We are having asp.net MVC view; depending on the value of the Model property we need to either render a textbox or readonly textbox. we were thinking of doing this by applying CSS to the view control. Has someone done this earlier?

Note that there’s a subtle difference between readonly and disabled . In both cases the value is uneditable, but the former will send the value to the server side anyway, while the later won’t. Also the later has in most webbrowsers a different (darker/grayed out) default style.

9 Answers 9

Doesn’t work everywhere though.

pointer-events: none isn’t supported by IE 8, 9, is for SVG elements only in 10, and is finally supported in 11, according to posts in stackoverflow.com/questions/5855135/…

Thanks! Another tip would be to add some background-color to change visually and help the user see the difference when u don’t have control over the html

CSS cannot disable the textbox, you can however turn off display or visibility.

display: none; visibility: hidden; 

Or you can also set the HTMLattribute:

You can’t disable anything with CSS, that’s a functional-issue. CSS is meant for design-issues. You could give the impression of a textbox being disabled, by setting washed-out colors on it.

To actually disable the element, you should use the disabled boolean attribute:

Or, if you like, you can set this via JavaScript:

document.forms['formName']['inputName'].disabled = true;​​​​ 

Keep in mind that disabled inputs won’t pass their values through when you post data back to the server. If you want to hold the data, but disallow to directly edit it, you may be interested in setting it to readonly instead.

// Similar to document.forms['formName']['inputName'].readOnly = true; 

This doesn’t change the UI of the element, so you would need to do that yourself:

You could also target any disabled element:

You can’t disable a textbox in CSS. Disabling it is not a presentational task, you will have to do this in the HTML markup using the disabled attribute.

You may be able to put something together by putting the textbox underneath an absolutely positioned transparent element with z-index. But that’s just silly, plus you would need a second HTML element anyway.

You can, however, style disabled text boxes (if that’s what you mean) in CSS using

from IE7 upwards and in all other major browsers.

Источник