Text in disabled textbox should appear as normal text and not blurred text

Hi,

I have a disabled textbox in my html page and a textbox is disabled. The text is appearing blurred. I want the text in the disabled textbox should appear like a normal text which appears in normal textboxes.

Thanks in advance
sankarganeshAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
bpmurrayConnect With a Mentor Commented:
OK, it's not a text area,  but rather a text input field: your use of "textbox" had me confused. Anyway, the following will work fine:

<input type="text" name="test" maxlength="100" size="55" value="hello world" disabled="disabled" style="color: black; background-color:white;">
0
 
bpmurrayCommented:
Then don't use disabled! You probably have something like:
       <textarea id="ta1" disabled="disabled">Hello World</textarea>

Change it to use readonly instead
         <textarea id="ta2" readonly="readonly">Hello World</textarea>
0
 
sankarganeshAuthor Commented:
The requirement is I have textfield and by default the textbox is disabled and the text inside the diabled textfield is appearing blurred. I wanted to show the appearance of the text in the disabled textbox similar to the text in a non-disabled textbox. By seeing the screen one should not be able to find out if the textfield is disabled or not.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
bpmurrayCommented:
In general, setting readonly makes an input element appear the same as the normal input element, while disabled sets it to grey. However, you can override this quite easily using CSS. The is an example file which shows the default behaviors, and then shows the same with a simple style (yellow background, red text) added.I've shown it both for a textarea and for an ordinary input text field:

<html><head>
<style type="text/css">
.txtarea {
   background-color: yellow;
   color: red;
}
</style>
</head><body>
1. Default display settings: <br />
a. Disabled:
<textarea id="ta1a" disabled="disabled">Hello World</textarea>
&nbsp;<input id="inp1a" value="Hello World" disabled="disabled"><br />
b. Readonly:
<textarea id="ta1b" readonly="readonly">Hello World</textarea>
&nbsp;<input id="inp1b" value="Hello World" readonly="readonly"><br />
c. Normal:
<textarea id="ta1c">Hello World</textarea>
&nbsp;<input id="inp1c" value="Hello World"><br />
<br /><br />
2. Using styles to set the display: <br />
a. Disabled:
<textarea id="ta2a" disabled="disabled" class="txtarea">Hello World</textarea>
&nbsp;<input id="inp1a" value="Hello World" class="txtarea" disabled="disabled"><br />
b. Readonly:
<textarea id="ta2b" readonly="readonly" class="txtarea">Hello World</textarea>
&nbsp;<input id="inp1a" value="Hello World" readonly="readonly" class="txtarea"><br />
c. Normal:
<textarea id="ta2c" class="txtarea">Hello World</textarea>
&nbsp;<input id="inp1a" value="Hello World" class="txtarea"><br />
</body></html>
0
 
sankarganeshAuthor Commented:
I agree this usage of style class in html page to make life easier. What is the style class do I need to use to display the text in a disabled textbox similar to a text which is displayed in a non-disabled textbox to avoid the text appearing in greyed color?
0
 
bpmurrayCommented:
Try this:
.txtarea {
   background-color: white;
   color: black;
}
0
 
sankarganeshAuthor Commented:
No. It is still appearing as blurred
0
 
bpmurrayCommented:
What is the HTML for that field?
0
 
sankarganeshAuthor Commented:
I tried like this
<input type="text" name="test" maxlength="100" size="55" value="" disabled="disabled" style="color: black;">
0
 
jessegivyDeveloperCommented:
Is this a school assignment?  Why is a perticular html attribute "required"?  Perhaps the word disabled was used not knowing that disabled is an actual attribute name.  I'm just not so sure why you're resistant to using readonly, in essence it accomplishes what you're after?  It does in essence disable the textbox but leaves the display in tact.  If readonly allows script modification of the textbox then you could write some javascript to ensure that it's truely disabled.

I notice the value is set to an empty string so what's the point of disabling?  What is it you're trying to accomplish, knowing why you want to disable the textbox might help us shed light?

~Jesse
0
All Courses

From novice to tech pro — start learning today.