Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components:

<!-- First input -->
<mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Second input -->
<mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput type="text">
</mat-form-field>

Before focusing on these input fields, they should look like this:

https://i.stack.imgur.com/hW4Et.png

I want the first input mat-label to be blue when focused and floating at the top left corner.

https://i.stack.imgur.com/C8ske.png

For the second input mat-label, I prefer it to be black in color.

https://i.stack.imgur.com/hH3Bn.png

Is there anyone who can help me achieve this? Thank you very much!

cssangularangular-material

Answer №1

To bypass the usage of ::ng-deep, you have the option to implement styles in the file named styles.css

  <mat-form-field class="">
    <input matInput placeholder="Top pick for food" value="Sushi">
  </mat-form-field>
  <br>
  <mat-form-field class="red-float">
    <input matInput placeholder="Top favorite dish" value="Sushi">
  </mat-form-field>

styles.css:

.red-float.mat-focused label{
  color:red !important;
}

Demo

Answer №2

To customize the styling of a child component in CSS, you can utilize the ::ng-deep directive.

If the input element is within your component, you have the option to target it specifically using 

mat-form-field input[matInput] {}

Answer №3

Check out the code snippet below.

HTML

 <!-- Input field 1 -->
<mat-form-field class="first">
    <mat-label>Task 1: Enter your task here</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Input field 2 -->
<mat-form-field class="second">
    <mat-label>Task 2: Enter your task here</mat-label>
    <input matInput type="text">
</mat-form-field>

CSS

mat-form-field.mat-focused:first-child mat-label{
  color:rgb(80, 200, 30);
}

mat-form-field.mat-focused:last-child mat-label{
  color:blue;
}

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

Troubleshooting issue: Bootstrap 4 Card trimming absolute content within div

Having trouble adding a rounded icon to the top center of a card, but part of the icon is getting cut off. Any suggestions? .header-icon-round { width: 60px; height: 60px; border-radius: 30px; font-size: 30px; background-color: #fff; ...

csstwitter-bootstraptwitter-bootstrap-4

Switching the visibility of multiple textareas from block to none

I am currently exploring ways to make one text area disappear while another one appears in its place. With limited knowledge of Javascript and just starting my journey into HTML and CSS, I am reaching out to the forum for assistance or guidance on the rig ...

javascripthtmlcss

Borders are absent on several div elements

There is a strange issue I'm facing where some borders on identical divs are not showing up. I have spent hours trying to troubleshoot this problem, and it seems like zooming in or out sometimes makes the border appear or disappear. My hunch is that i ...

htmlcssborder

How can I change the background color of a parent div when hovering over a child element using JavaScript

I am working on a task that involves three colored boxes within a div, each with a different color. The goal is to change the background-color of the parent div to match the color of the box being hovered over. CSS: .t1_colors { float: left; wid ...

javascripthtmlcsscolorshover

Encountered an error while attempting to load module script

Upon launching an Angular application on Heroku, a situation arises where accessing the URL displays a blank page and the console reveals MIME type errors. The error message reads: "Failed to load module script: The server responded with a non-JavaScrip ...

angulartypescriptherokumime-types

Are you delving into the realm of reduce functions in order to grasp the intric

Currently following this particular tutorial where they utilize the reduce method to transform an Array<Student> into a { [key: string]: Array<string | number> }. The tutorial includes this expression that caught my attention. It's quite n ...

javascriptnode.jsangulartypescript

Is it possible to balance proper CSS and Javascript maintenance with the use of a Template Engine?

When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...

javascriptcssvelocitytemplate-engine

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

javascriptjqueryhtmlcss

Instructions on adding a class to every input element within a form using CakePHP

Is there a way to utilize the inputDefaults property in order to apply a consistent class across all input elements within my form? Additionally, could you provide a concise explanation of what exactly the inputDefaults entails? ...

phphtmlcsscakephp

Hover effect on a single cell in a Bootstrap table

As I was working on creating a calendar design, I found myself pondering how to incorporate a hover effect using Bootstrap 4 for the cells. Here is a preview of the current calendar design I am aiming to achieve a hover effect similar to Bootstrap's ...

htmlcsstwitter-bootstrapbootstrap-4

The ability to choose only one option in a checkbox within a grid view column

In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...

htmlangular

Be cautious when mentioning unbound methods that could lead to unintended scoping of the `this` keyword

Hey there! Any suggestions on how to avoid encountering this error related to unintentional scoping issues with unbound methods? Code snippet: You are seeing multiple errors (like 16:41, 16:62, 17:34) indicating that referencing unbound methods without ne ...

angular

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

javascripthtmlcssbootstrap-4ejs

Page width incorrectly set leading to unnecessary scrolling

Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work. .container.open-sidebar { position: relative; left: 240px; } #sidebar ...

htmlcss

Fetching HTML files directly after building Angular (Tips for Developing Chrome Extensions)

Currently, I am in the process of creating a custom Panel within Chrome DevTools using Angular and Typescript. Through my efforts, I have successfully implemented a new Panel by utilizing the code snippet provided below: chrome.devtools.panels.create(&ap ...

angulargoogle-chrome-extension

What is the reason behind the immediate firing of the animate callback function when a CSS transition is present?

I am facing an issue where the callback function fires immediately, disregarding the linear ease type and defaulting to the swing ease in CSS transitions. Is there a way to ensure that the animate function works correctly with the transition? The reason fo ...

jquerycssjquery-animatecss-transitions

Webkit causing complications with straightforward CSS3 animation

I'm currently working on a website and you can check it out here: Unfortunately, I've encountered an issue where the animations aren't triggering specifically on webkit browsers like Chrome and Safari: @-webkit-keyframes slideright{ 0% {tr ...

cssanimationwebkit

Guide on utilizing jasmine's spy functionalityAlways remember to use the

I am a beginner when it comes to Angular and Jasmine, and I am encountering difficulties while attempting to mock: public uploadFile(confirm) { this.uploadModalRef.close(); if (this.filePath.length) { let ngbModalOptions: NgbModalOptions = { ...

angularjasminekarma-jasmine

Implementing jQuery form validation including checking for the strength of the password

My understanding of jQuery was quite basic until I began working on jQuery form validation with password strength check. I successfully completed the password strength check portion, but now I am unsure of how to enable the submit button once the condition ...

javascriptjqueryhtmlcssvalidation

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss