Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can one disable an input field by pure css?

Like with attribute disable on the <input> html tag.

I'm not interested in the effects of disabling, like not being included in a POST of the form, and the styling could of course be redone in css, if it should just look disabled. (And my input field is a submit button, so disabling from POST is irrelevant.)

I just need it to be unclickable and to look disabled.

Is that possible in pure css without adding the attribute on the html tag?

like image 764
Steeven Avatar asked Jun 24 '12 18:06

Steeven


People also ask

How do I make input field Disabled in CSS?

To disable form fields, use the CSS pointer-events property set to “none”.

How do I disable something in CSS?

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. Keep in mind that disabled inputs won't pass their values through when you post data back to the server.

How can we disable an input element?

The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable. Tip: Disabled <input> elements in a form will not be submitted!

How do I enable and disable input fields?

We can easily disable input box(textbox,textarea) using disable attribute to “disabled”. $('elementname'). attr('disabled','disabled'); To enable disabled element we need to remove “disabled” attribute from this element.


3 Answers

No you cannot disable the functionality of it via just CSS (since it is there just for styling purposes), though you can make it appear greyed out like a disabled button using CSS. To make it disabled in terms of functionality, you will have to resort to JavaScript.


With CSS all you can do is to style your button greyed out via CSS and then create another element over it making its z-index higher, setting position and opactiy to fully transparent. This would mean your actual element is enabled but one will not be able to click it because of element over it with full transparency.


Another solution is to just add pointer-events: none; to the style of the dom element, should work on most of the browsers.

like image 85
Sarfraz Avatar answered Oct 19 '22 09:10

Sarfraz


you can do in the below manner...

.input-disable {
  pointer-events: none;
  border: 1px solid grey;
  background-color: lightgrey;
}

input[type=text] {
  height: 30px;
  width: 180px;
  padding: 10px;
}
<input type="text" value="Normal field">
<input type="text" class="input-disable" tabindex="-1" value="disabled field">
like image 31
Narottam Goyal Avatar answered Oct 19 '22 08:10

Narottam Goyal


you can add the following CSS which will disable any pointer events. this will also disable hover, focus etc.

.style { 
   pointer-events: none; 
}
like image 2
Quade du Toit Avatar answered Oct 19 '22 10:10

Quade du Toit