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, Jul 04 '12 at 11:32
Just add style, as show in the answers. Only one problem though, Opera doesn't color it when disabled. — Deep Frozen, Jul 04 '12 at 11:32

score 3 · Answer 1 · edited May 23 '17 at 10:34

3

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.

edited May 23 '17 at 10:34

Community

1
1

answered Jul 04 '12 at 11:28

Fabrizio Calderan

120,726
26
164
177

I'll just delete disabled="disabled". Thx – gotbahn Jul 04 '12 at 11:55

score 1 · Answer 2 · edited Nov 10 '20 at 14:01

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.

score 0 · Answer 3 · answered Jul 04 '12 at 11:29

0

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.

answered Jul 04 '12 at 11:29

Shiv Kumar Ganesh

3,799
10
46
85

score 0 · Answer 4 · answered Jul 04 '12 at 11:29

0

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

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

This should help, :)

code

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

answered Jul 04 '12 at 11:29

Tats_innit

33,991
10
71
77

Engineer · Accepted Answer · 2012-07-04T12:12:15.183

0

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

edited Jul 04 '12 at 12:12

answered Jul 04 '12 at 11:42

Engineer

47,849
12
88
91

@Godban I have slightly improved my answer. Look again. – Engineer Jul 04 '12 at 12:13

Change color of value in input

5 Answers5