How to change font-color for disabled input

Question

I need to change the style for a disabled input element in CSS    lt input type  text  class  details-dialog  disabled  disabled    gt    How I can do this for Internet Explorer

User · Accepted Answer

You can t for Internet Explorer   See this comment I wrote on a related topic      There doesn t seem to be a good way    see    How to change color of disabled html controls in IE8 using css   - you can set the input to readonly instead  but that has other   consequences  such as with readonly    the input will be sent to the server   on submit  but with disabled  it won t   be   http   jsfiddle net wCFBw 40   Also  see  Changing font colour in Textboxes in IE which are disabled

User · Answer

You can   input type  text   disabled       color  red

User · Answer

It is the solution that I found for this problem     If IE  inputElement writeAttribute  unselectable    on       Other browsers  inputElement writeAttribute  disabled    disabled     By using this trick  you can add style sheet to your input element that works in IE and other browsers on your not-editable input box

User · Answer

The following gets you pretty close in IE8 and works in other browsers too   In your html    lt input type  text          readonly  readonly      lt  -- disallow editting -- gt         onfocus  this blur      lt  -- prevent focus -- gt         tabindex  -1            lt  -- disallow tabbing -- gt         class  disabledInput    lt  -- change the color with CSS -- gt           gt    In your CSS    disabledInput       color  black      In IE8  there is  a slight amount of border color change on hover   Some CSS for input disabledInput hover could probably take care of this

User · Answer

Replace disabled with readonly  readonly   I think it is the same function    lt input type  text  class  details-dialog  readonly  readonly  style  color  ur color   gt

User · Answer

You could use the following style with opacity  input disabled  disabled    select disabled  disabled    textarea disabled  disabled         opacity  0 85  important      or a specific CSS class   ui-state-disabled      opacity  0 85  important

User · Answer

It seems nobody found a solution for this  I don t have one based on only css neither but by using this JavaScript trick I usually can handle disabled input fields   Remember that disabled fields always follow the style that they got before becoming disabled  So the trick would be 1- Enabling them 2-Change the class 3- Disable them again  Since this happens very fast user cannot understand what happened   A simple JavaScript code would be something like   function changeDisabledClass  id  disabledClass   var myInput document getElementById id   myInput disabled false                First make sure it is not disabled myInput className disabledClass       change the class myInput disabled true                Re-disable it

User · Answer

You can use readonly instead  Following would do the trick for you    lt input type  text  class  details-dialog  style  background-color   bbbbbb  readonly gt    But you need to note the following  Depends on your business requirement  you can use it      A readonly element is just not editable  but gets sent when the   according form submits  A disabled element isn t editable and isn t   sent on submit

User · Answer

This works for making disabled select options act as headers  It doesnt remove the default text shadow of the  disabled option but it does remove the hover effect  In IE you wont get the font color but at least the text-shadow is gone  Here is the html and css    x000D   x000D  select option disabled disabled color   5C3333 background-color   fff font-weight  bold   x000D  select option disabled hover color    5C3333  important background-color   fff   x000D  select option hover color   fde8c4 background-color   5C3333   x000D   lt select gt  x000D        lt option class  disabled  disabled gt Header1 lt  option gt  x000D        lt option gt Item1 lt  option gt  x000D        lt option gt Item1 lt  option gt  x000D        lt option gt Item1 lt  option gt  x000D        lt option class  disabled  disabled gt Header2 lt  option gt  x000D        lt option gt Item2 lt  option gt  x000D        lt option gt Item2 lt  option gt  x000D        lt option gt Item2 lt  option gt  x000D        lt option class  disabled  disabled gt Header3 lt  option gt  x000D        lt option gt Item3 lt  option gt  x000D        lt option gt Item3 lt  option gt  x000D        lt option gt Item3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

input disabled   input disabled  hover   background-color  444

[css] How to change font-color for disabled input?

Examples related to css

Examples related to internet-explorer

Examples related to input