I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this?

https://i.sstatic.net/kioAZ.png

Here's my HTML code:

 <mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p"
                        ngClass.gt-xs="pr-4">
                        <mat-label>Versiyon</mat-label>
                        <input matInput formControlName="Revision" type="text">
                    </mat-form-field>

Keep in mind that it's a reactive form, so here's my TS code:

    Revision: new FormControl({ value: "", disabled: true }),
javascripthtmlcssangulartypescript

Answer №1

To implement this style, simply insert the following CSS code into your styles.scss file:

Styling for labels:

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

Styling for input values:

.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;
}

https://i.sstatic.net/YL0zA.gif

Answer №2

While this thread may be old, the solution above didn't work for me. However, I found success by placing the code in the actual component .css file instead of styles.scss. In my custom component with appearance set to "outline", here is what worked for me:

Even though I'm aware that ng-deep is deprecated, it still gets the job done. Sometimes you just have to roll with what works.

Here's the code for the selected value styling:

:host ::ng-deep.mat-select-disabled .mat-select-value {
  color: rgb(43, 43, 43);
}

To style the label (note the importance of the tag):

:host ::ng-deep.mat-form-field-disabled label {
  color: rgb(43, 43, 43) !important;
}

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

What is the best way to remove a specific HTML section using a JavaScript function?

I am struggling to figure out how to remove a specific HTML section using a button that is contained within the section itself. The section I want to delete was initially added by clicking a different button. Although I can successfully add a new section ...

javascripthtml

Unable to directly assign a variable within the subscribe() function

My goal is to fetch a single row from the database and display its information on my webpage. However, I've encountered an issue with the asynchronous nature of subscription, which prevents immediate execution and access to the data. Upon running the ...

javascriptangulartypescript

These specific resources don't have a cache expiration set. Wondering how to properly set a cache expiration for a JavaScript file

I am working on a web application that utilizes external JavaScript files. Upon running Google's page speed tool, I realized that several resources are missing cache expiration settings, including images and CSS files. Can you provide examples of how ...

asp.netjavascriptiiscache-expiration

Utilizing HTML form action to link to a PHP script located in a separate folder

My journey begins here Main: Members/name.html search.php Members is a directory containing my html code in name.html <form action="../search.php" method="get"> <div> &l ...

phphtml

Next JS Event Listener Failing to Detect Scroll Events

Currently, I am attempting to change the state and display a shadow in the navigation bar when the user scrolls, but for some reason it is not detecting the event. I am working with nextJS 13 and tailwind css. const [shadow, setShadow] = useState(false) ...

javascriptcssnext.jstailwind-css

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Hey there, I've been working on implementing webpack for a project that involves microservices, Node.js, TypeScript, AWS, and AWS SAM. My main objectives are: Reduce the cold start time of lambda functions. Minimize security vulnerabilities by e ...

javascriptnode.jstypescriptamazon-web-serviceswebpack

What is the best way to display a variable from a function located outside of the public http folder in PHP?

I am attempting to create a registration form using Ajax. I have a script that calls a registration function located in an includes folder outside of the public html folder. The output of this function should be alerted, but when I click the button, the al ...

javascriptphpajax

Issue with Bootstrap small column vertical alignment not functioning as expected

I am working on a bootstrap layout with two columns. One column contains multiple elements and text, making it quite long, while the other column only has an image. I am trying to center this image vertically within the left column of content. Here is the ...

htmlcsstwitter-bootstrap-3

Is it advisable to break down views into smaller components in Vuejs?

I'm currently managing a project with two folders for components - 1) src/components/ and 2) src/views. The general components like a drawer or nav are stored in the first folder, while the pages (views) are stored in the second. Now I face a challen ...

htmlvue.jsvuejs2vuejs3components

The justify-content-around property in Bootstrap-4 does not seem to be functioning as expected when

I've been working with bootstrap-4 and I'm struggling to understand why justify-content-around functions properly with flex-row but not with flex-column. I tried applying flex-column justify-content-around to div.item2 but it's not producing ...

htmltwitter-bootstrapbootstrap-4flexbox

Utilizing Firebase in place of .json files for the AngularJS Phonecat application

I am currently exploring firebase and attempting to retrieve data using this service from firebase instead of json files. However, I have encountered some challenges in getting it to function properly. This is inspired by the angularjs phonecat example .f ...

javascriptjsonangularjsfirebaseangularfire

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

javascripthtmlangularjsformsmodel-view-controller

Tables are being tampered with by Chrome

I'm facing an issue where my website appears fine in FireFox (screenshot), but the tables get messed up in Chrome (screenshot). I've gone through my html and css validation and tried various solutions, but I'm completely lost on how to ...

htmlcssgoogle-chrome

Tips for Resizing and Reviving Divs with jQuery

I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page ...

javascriptjqueryhtmlcss

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

Discover the method for tracking idle time with jQuery and PHP

I have a script that utilizes PHP sessions through a custom class. One of the methods in this class calculates the remaining seconds before the session expires. Whenever the user refreshes the page or opens a new one, the idle time counter is reset using ...

javascriptphpjquerytimeoutidle-timer

Leverage the nativeElement property within two separate components

Encountering an error in the autocomplete feature for Angular Maps (AGM), which reads: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of ...

angulartypescriptgoogle-mapsgoogle-maps-api-3

The arrangement of imports in NodeJS can lead to unexpected errors

Having an issue with the order in which I include different models in my main server.js file using NodeJS. Below is the code from my product.js Product model file: var mongoose = require("mongoose"); var Dealer = require("./dealer.js") var productSc ...

javascriptnode.jsmongodbexpress

Monitor Socket IO for client disconnection events

I am facing an issue where I need to identify when a user loses connection to the socket. It seems that socket.on("disconnect") is not triggering when I simply close my laptop, leading to the ajax call not executing to update the database and mark the us ...

javascriptnode.jssocket.io

The integration of a Bootstrap modal within the side bar's rendering

Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...

javascripthtmlcssbootstrap-modalbootstrap-5