What is the method for altering the text color within a disabled input field?

Currently facing difficulty in changing the color of the text within the input field when it's disabled. I'm utilizing Material UI for this purpose.


        import React from "react";
        import { makeStyles } from "@material-ui/core/styles";
        import Input from "@material-ui/core/Input";

        const useStyles = makeStyles(theme => ({
            inputText: {
                color: "blue"
            }
        }));

        export default function Inputs() {
            const classes = useStyles();

            return (
                <form className={classes.root} noValidate autoComplete="off">
                    <Input
                        className={classes.inputText}
                        defaultValue="Disabled"
                        disabled
                        inputProps={{ "aria-label": "description" }}
                    />
                </form>
            );
        }
    

Check out this demo on CodeSandbox

Answer №1

const inactiveElements = document.querySelectorAll('input[disabled]');

for (let j = 0, m = inactiveElements.length; j < m; ++j) {
  inactiveElements[j].style.color = 'blue';
}
<input disabled value="green" />
<input value="blue" />
<input disabled />

Answer №2

Your stylesheet was not located at the sandbox link provided, so I took the initiative to add a style tag which resolved the issue.

<style>
    input:disabled{
      color:blue;
    }
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying PHP content using JavaScript classes

I have a popup feature implemented in JavaScript and all the necessary scripts added to my HTML page. I am attempting to load a PHP page in the popup when the submit button of my form is clicked. The popup is functioning correctly for buttons like the one ...

Infuse the theme into the sx prop of MUI 5

The code snippet above was originally written using MUI v4: const useStyles = makeStyles(theme => ({ toolbarMargin: { ...theme.mixins.toolbar } })) To update this code to MUI v5 and utilize the sx prop, I attempted the following implementation: ...

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

Navigate the div with arrow keys

Looking for an answer similar to this SO post on moving a div with arrow keys, could a simple and clear 'no' be sufficient: Is it possible to turn an overflowing div into a "default scroll target" that responds to arrow-up/down/page-down/space k ...

Keep updating information dynamically using Ajax

I've set up a page featuring Bootstrap cards that fetch information from a MySQL database. What I'm Looking For I want these cards to refresh every 3 seconds without the need for page reload. I believe Ajax is the solution for this task as it a ...

Tips for showcasing JSON data within an array of objects

I'm trying to work with a JSON file that has the following data: {"name": "Mohamed"} In my JavaScript file, I want to read the value from an array structured like this: [{value: "name"}] Any suggestions on how I can acc ...

My React app is experiencing connectivity issues with the proxy server linking to my Express server

Currently, I have both my React app running on port 3000 and my Express server on port 4000 on the same local machine. Within my React app, I utilize the fetch API to send registration form data to my Express server at the '/register' route- con ...

Stop the form from refreshing the page after submitting a post request to the backend API

I am facing an issue with my React front end and Express back end integration. I have a form in my front end that sends data to the API using two buttons - Submit and Close. The Close button works perfectly by closing the overlay without leaving the page, ...

Upon selecting the checkbox, the user will be redirected to an input textbox

Can I make it so that when I check a checkbox, it automatically directs me to a textbox as if I pressed the TAB key? Is there a way to achieve this using only HTML and CSS? ...

Loading a PHP template into HTML using a JQuery loop

I am struggling with an API call that returns an array of arrays. My goal is to loop through each value and use them to load a PHP template that I have created. The issue I am facing is that only the first value is being displayed properly, while the subse ...

Filtering for Material Autocomplete is limited to the getOptionLabel field

Currently, I am utilizing the Google Material-UI autocomplete component. It is currently only filtering based on the "getOptionLabel" option field when text is entered into the input field. However, I would like the autocomplete to filter based on more tha ...

Troubleshooting the "Invalid hook call" issue in React caused by importing a npm linked component with a dependency on styled-components

Initially, I included react, react-dom, and styled-components in the peerDependencies of the npm linked component (and removed these dependencies from dependencies and devDependencies). Next, I followed the official workaround to utilize npm link (which s ...

What is the process for implementing filtered HTML attributes in a directive?

I’ve created a custom directive that generates a popup menu by extracting data from HTML content. The purpose is to transform a group of Bootstrap carousel-compatible elements into a structured list. However, each .item element contains an attribute with ...

What could be the reason for the issue with Material-UI Select element not properly showing the label outline

To showcase a MUI (v5.2.3) Select component along with a label, developers can implement the following code snippet. <FormControl className={classes.formControl} disabled={props.disabled}> <InputLabel id="waiverStatus">Waiver Status ...

Execute test scenarios and upon successful completion, initiate deployment of a React JS application using Jenkins

I am currently facing an issue with running test cases and deploying a React-js app using Jenkins. After pushing my code to Git, I can successfully run the React-js app locally. However, when trying to execute the second command mocha (which is used to ru ...

Is it possible to arrange elements in CSS based on their attribute values?

I need to arrange a list of images in ascending order based on the index attribute using CSS. The challenge is that the index values will change dynamically and new images will be added through Ajax, so I want them to automatically update in the correct or ...

Different methods for dynamically altering the style attribute

Here's some code I wrote: <html> <head> <style> .containerTitle { background-color:silver; text-align:center; font-family:'Segoe UI'; font-size:18px; font-weight:bold; height:30px; } ...

What is the process for altering the entire screen's color in a React application?

Currently, I am working on a project in React and have come across an issue with changing the background color of the entire body. It seems that using the backgroundColor style only changes the background color of the content, such as when I try to write: ...

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...