Disable a textbox using CSS

Question

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. — BalusC, Mar 16 '10 at 22:26

score 81 · Answer 1 · edited May 29 '14 at 01:10

81

you can disable via css:

pointer-events: none;

Doesn't work everywhere though.

edited May 29 '14 at 01:10

alex

479,566
201
878
984

answered Mar 27 '12 at 03:11

abbie

934
6
3

9

Text input can still be tabbed into. – alex May 29 '14 at 01:12
`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 http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – vapcguy Aug 22 '14 at 02:36
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 – Andre Aquiles Nov 06 '19 at 13:11

score 64 · Accepted Answer · answered Mar 16 '10 at 22:24

64

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

display: none;
visibility: hidden;

Or you can also set the HTMLattribute:

disabled="disabled"

answered Mar 16 '10 at 22:24

Dustin Laine

37,935
10
86
125

Sampson · Answer 3 · 2012-12-10T15:21:36.813

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:

<input type="text" name="lname" disabled />

Demo: http://jsfiddle.net/p6rja/

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

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

Demo: http://jsfiddle.net/655Su/

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 <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;

Demo: http://jsfiddle.net/655Su/1/

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

input[readonly] { 
    background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

You could also target any disabled element:

input[disabled] { /* styles */ }

score 10 · Answer 4 · answered Mar 16 '10 at 22:24

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

input[disabled] { ... }

from IE7 upwards and in all other major browsers.

score 3 · Answer 5 · edited May 29 '14 at 01:12

3

Going further on Pekka's answer, I had a style "style1" on some of my textboxes. You can create a "style1[disabled]" so you style only the disabled textboxes using "style1" style:

.style1[disabled] { ... }

Worked ok on IE8.

edited May 29 '14 at 01:12

alex

479,566
201
878
984

answered Jan 19 '11 at 17:34

GBU

184
6

2

`style1` is a terrible class name. Was it generated by a tool? – alex May 29 '14 at 01:12
@alex Haha no, the name is a kind of awkward pt-br string so I used "style1". – GBU Aug 22 '16 at 20:22

new Q Open Wid · Answer 6 · 2020-04-24T13:34:48.713

&tl;dr: No, you can't disable a textbox using CSS.

pointer-events: none works but on IE the CSS property only works with IE 11 or higher, so it doesn't work everywhere on every browser. Except for that you cannot disable a textbox using CSS.

However you could disable a textbox in HTML like this:

<input value="...." readonly />

But if the textbox is in a form and you want the value of the textbox to be not submitted, instead do this:

<input value="...." disabled />

So the difference between these two options for disabling a textbox is that disabled cannot allow you to submit the value of the input textbox but readonly does allow.

For more information on the difference between these two, see "What is the difference between disabled="disabled" and readonly="readonly".

score 1 · Answer 7 · answered Mar 13 '13 at 11:24

1

Just try this.

<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>

This won't allow any characters to be entered inside the TextBox.

answered Mar 13 '13 at 11:24

Arun Banik

470
4
9

7

Careful with this. Users could still right click and choose paste from the context menu to paste data into the textbox. – egbrad Jun 26 '13 at 18:36

score 0 · Answer 8 · edited Sep 08 '12 at 09:14

0

**just copy paste this code and run you can see the textbox disabled **

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title> 

<style>.container{float:left;width:200px;height:25px;position:relative;}
       .container input{float:left;width:200px;height:25px;}
       .overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;} 
</style>
 </head>
<body>
      <div class="container">
       <input type="text" value="rvi.tom@gmail.com" />
       <div class="overlay">
        </div>
       </div> 
</body>
</html>

edited Sep 08 '12 at 09:14

joshua

2,371
2
29
58

answered Jun 28 '10 at 12:30

ravi tom

33
1

4

**Code without explanation is generally a bad answer on Stack** Anyway, this does very little for a whole lot of code. It only gives the appearance of being disabled and in a rather messy way. If a developer accepts this as valid, they could just as easily use a `input.disabled` and add the class via javascript as needed. You could also use an event handler on `focus` to `blur`. Solutions which easily adapt to more than one element. – Regular Jo Dec 09 '17 at 22:01

score -2 · Answer 9 · edited Feb 27 '20 at 03:07

-2

Another way is by making it readonly:

<input type="text" id="txtDis" readonly />

edited Feb 27 '20 at 03:07

Dale K

25,246
15
42
71

answered May 22 '19 at 00:57

silentwarrior

161
1
1
7

1

When adding an answer to an older question with existing answers it is helpful to explain what new aspects your answer brings, and to acknowledge if the passage of time impacts the answer. – Jason Aller Aug 07 '19 at 23:15
And to include code blocks where appropriate. The only part of your answer I could see was "anotherway is by making it readonly". – S.S. Anne Aug 08 '19 at 15:53
Please explain what your answer truly means. "another way is by making it readonly" is very broad. This is not a real answer, this is a ***partial*** answer. Add more of this to make it complete. – new Q Open Wid Aug 08 '19 at 19:10
Can a question like this be removed? No offence to silentwarrior, but in this situation there is plenty of other "higher quality" answers which should take this one's place. – LuvForAirplanes Jan 28 '20 at 19:07

Disable a textbox using CSS

9 Answers9

Linked