How to Change Font-Color for Disabled Input

How to change font-color for disabled input?

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

I want to change the font color of a disabled input

You can add this CSS class in your styles.scss file :

For label

.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-label {
  color: rgba(0,0,0,.6)!important;
}

For input value

.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after, .mat-input-element:disabled {
  color: rgba(0,0,0,1)!important;
}

Sample Image

CSS: How to change font color for a specific disabled field?

Switch the input selector for your ID:

#thisOne[disabled=disabled] { color: #fff !important; background: red;}

<input id="thisOne" disabled="disabled" value="Lorem ipsum">
<input id="notThisOne" disabled="disabled" value="Lorem ipsum">

How to change font color of disabled input in Firefox

Different browsers style disabled elements differently. Here is how you can control the style of disabled elements in Firefox.

[disabled] {
  color:#ff0000;
  background-color:#00ff00;
}

Change the font color of disabled input text box?

There is no way to do it - what you can do instead though is change the input to readonly:

<input class="TextBoxAsLabel" data-val="true" data-val-number="blah" readonly="readonly" id="Total" name="XTotal" type="text" value="$0.00" />

This will give you the disabled functionality but preserve styling :)

See this post for more details: How to change font-color for disabled input?

Hope This Helps.

Disabled input fields not changing text color with CSS in Jquery Mobile

Nice to reply to you about the issue you are facing.

Since, you are using Jquery Mobile. The Jquery mobile on DOM generates div covering the input box. Since, you are also using disabled property of input box. So, jquery mobile implements a class on that div and there the opacity level have been defined.

So, add this:-

.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }

Working Fiddle :- https://jsfiddle.net/h3Lbadgv/1/

Hope it works for you.

Thanks

How to change text color of disabled MUI Text Field | MUI v5?

You need to use ".Mui-disabled" class to override required css as below,

import TextField from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

const CustomDisableInput = styled(TextField)(() => ({
  ".MuiInputBase-input.Mui-disabled": {
    WebkitTextFillColor: "#000",
    color: "#000"
  }
}));

function App() {
  return (
    <>
      <span>Disabled Input:</span>
      <CustomDisableInput
        fullWidth
        variant="standard"
        size="small"
        id="id"
        name="name"
        type="text"
        value="your text"
        InputProps={{ disableUnderline: true }}
        disabled={true}
      />
    </>
  );
}

Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv

How to Change Font-Color for Disabled Input