<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+
<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+
Share Improve this question edited Jul 4, 2012 at 11:34 gotbahn asked Jul 4, 2012 at 11:28 gotbahngotbahn 5162 gold badges4 silver badges19 bronze badges 3-
using CSS is simle:
color:#ff0000;will be red – antyrat Commented Jul 4, 2012 at 11:29 - Checkout the style="color:green" or any color would work in all browsers – 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 Commented Jul 4, 2012 at 11:32
5 Answers
Reset to default 3just 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/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.
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/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.
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
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.
Demo http://jsfiddle/ELuXW/1/
API: CSS - http://api.jquery./css/
This should help, :)
code
$('.problem').css('color', 'blue');