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 · 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_

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_

<select>_x000D_
     <option class="disabled" disabled>Header1</option>_x000D_
     <option>Item1</option>_x000D_
     <option>Item1</option>_x000D_
     <option>Item1</option>_x000D_
     <option class="disabled" disabled>Header2</option>_x000D_
     <option>Item2</option>_x000D_
     <option>Item2</option>_x000D_
     <option>Item2</option>_x000D_
     <option class="disabled" disabled>Header3</option>_x000D_
     <option>Item3</option>_x000D_
     <option>Item3</option>_x000D_
     <option>Item3</option>_x000D_
</select>

_x000D_

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

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

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

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

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

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

You can   input type  text   disabled       color  red

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