最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Change color of value in input - Stack Overflow

programmeradmin1浏览0评论
<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
Add a ment  | 

5 Answers 5

Reset to default 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/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');​
发布评论

评论列表(0)

  1. 暂无评论