Change color of value in input

Question

<input class="problem" type="text" value="some text" disabled="disabled">

How can i change color of "some text"?

upd: Styling by CSS working only in Chrome & Mozilla. I need support of all browser including IE7+

Checkout the style="color:green" or any color would work in all browsers — Shiv Kumar Ganesh
– Shiv Kumar Ganesh, Commented Jul 4, 2012 at 11:32
Just add style, as show in the answers. Only one problem though, Opera doesn't color it when disabled. — Deep Frozen
– Deep Frozen, Commented Jul 4, 2012 at 11:32

Community · Accepted Answer · 2017-05-23 10:34:27Z

just apply some css style, e.g.

.problem { color : red; }

you can even define two different colours for both normal and disabled inputs like so;

.problem { color : red; } .problem[disabled] { color : #cfcfcf; }

example fiddle: http://jsfiddle.net/dgNZS

On older IE versions is not possible change the colour of a disabled input element as already answered here but you can try to follow bobince's workaround.

user229044 · Accepted Answer · 2020-11-10 14:01:45Z

You can change the disable style of the textbox for all properties in all browsers, except the color of the text and only in the IE. For IE (for all properties except the text color) you must set the doctype to 4.01 strict, and then using the code like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> input[disabled], input[readonly] { background-color: green; border: #3532ff 1px solid; color: #00FF00; cursor: default; } </style> </head> <body> <form> <input class="problem" type="text" value="some text" disabled="disabled"> </form> </body> </html>

But if you use the readonly instead of disabled="disabled" like Engineer wrote this works also in the ie.

Engineer · Accepted Answer · 2012-07-04 12:12:15Z

For cross-browser solution, you need to use readonly and unselectable attributes instead of disabled, and apply these styles:

.problem[readonly]{ color: red; /*Preventing selection*/ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /**/ }

markup:

<input class="problem" type="text" value="some text" readonly unselectable="on">

DEMO

Shiv Kumar Ganesh · Accepted Answer · 2012-07-04 11:29:51Z

Give it a Style ie style="color:green"

<input class="problem" type="text" value="some text" disabled="disabled" style="color:green">

Or Include this in your class you give to input.

Tats_innit · Accepted Answer · 2012-07-04 11:29:54Z

Demo http://jsfiddle.net/ELuXW/1/

API: CSS - http://api.jquery.com/css/

This should help, :)

code

$('.problem').css('color', 'blue');

Collectives™ on Stack Overflow

Change color of value in input

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Linked

Related