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

Having trouble understanding how to create a continuous loop for a CSS animation within the KreatureMedia Layerslider

Currently, I am using KreatureMedias Layerslider and trying to make a fullwidth wave bob up and down. This is what I have at the moment... <img class="ls-layer" data-ls="durationin:1500;scalein:1.1;offsetxin:-50;loopcount:-1;loopoffsetx:0sw;loopoffset ...

jqueryhtmlcssanimationplugins

Mastering the art of combining images and text harmoniously

I am having trouble aligning my lion image and h1 tag side by side. There seems to be an issue but I can't figure out what it is. h2 { width:50%; float:right; padding:30px 0px 0px 0px; margin:0 auto; } .lion { width:10%; float: left; paddin ...

htmlcss

stopping the collapsible animation of bootstrap before the medium breakpoint

I recently developed a website using Bootstrap. On my site, there is a navigation bar with menu options including 'About,' 'My Projects,' and 'Contact Me' that are hidden behind an expandable menu when the page width is less t ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-4

When reference variables are utilized before being parsed, what happens?

I'm a beginner learning Angular and have a question regarding the use of reference variables. Here is an example code snippet: <div class="bg-info text-white p-2"> Selected Product: {{product.value || '(None)'}} </div> <di ...

javascriptangular

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

Tips on incorporating background color into HTML emails dispatched via PHP mail()

Struggling to add a background color to my HTML email. I've attempted various methods: Inserting <script> tags with CSS code inside Adding bgcolor in body tags Using a CSS style sheet All to no avail. I suspect it could be the email provi ...

phphtmlcsshtml-emailemail

Stay tuned for Quasar's input validation event notifications

Within my Vue3 Quasar application, I have implemented a component structure similar to the following: <template> <div class="q-pa-md"> <div id="myCustomLabel">{{ props.label }}</div> <q-input r ...

cssvue.jstypesvuejs3quasar-framework

When checking for a `null` value, the JSON property of Enum type does not respond in

Within my Angular application, I have a straightforward enum known as AlertType. One of the properties in an API response object is of this enum type. Here is an example: export class ScanAlertModel { public alertId: string; public alertType: Aler ...

jsonangulartypescriptenumsnull

Hovering over a class list will modify various element IDs

Is there a way to change the height of an element with id = "header_nav" when hovering over the class "header_nav" li element? Here is the HTML Code: <div class="header_nav" id="header_nav"> <ul id="header_nav_mainmenu"> & ...

htmlcssclasshover

In the production mode, Nuxt styles may not be properly applied

After working on this project for about four months, everything seems fine in the development version. However, once I build the project and upload it to the server, some of my styles are not applied. For more information, I have imported styles both in c ...

cssvue.jsnuxt.jspostcsspostcss-loader

Exploring ways to capture all console outputs or retrieve the current console content in frontend development

Currently working with Angular and looking to integrate a bug reporting feature into my application. I want to capture the content of the browser's console for debugging purposes. However, I'm unsure of how to access it. Not all errors are logge ...

javascriptnode.jsangular

showing pop-up notification in Angular

I am utilizing the ngx-alert service to show an error message if the supplied credentials do not match any user account in my database. This is my current process: if (this.check.data.length == 0) { this.alert.danger('User does not exist' ...

angularalert

What is the best way to create a toggle effect for a <nav> bar that appears from beneath a div?

I need assistance with a navigation setup where the nav (located inside the header) needs to be connected to the bottom of a div named .menu_bar. The desired behavior is for the nav to slide down from directly underneath the .menu_bar when toggled, but cur ...

javascriptjqueryhtmlcss

Unable to get the Gtranslate function to function properly within the drop-down menu

Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to ...

javascriptjqueryhtmlcss

What is the best way to eliminate the text-decoration underline from a flex child when the parent is designated as the anchor?

I need help removing the text-decoration of a flex child when the parent is the anchor. Despite trying various CSS code, it doesn't seem to work as expected. On my WordPress site, the underline only shows on hover, but in the jsFiddle example I create ...

csshoverflexbox

Creating a dropdown menu with HTML and CSS is causing me a major migraine

<div class="fbtop"> <img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke"> <h2 class="title">Handcrafted with love</h2> <ul class="dropdown"> <li> <a hre ...

htmlcssdrop-down-menu

.css files standing their ground against modifications

Currently, I'm utilizing the WebStorm IDE to work on my React project. My goal is to make modifications to the app.css files in order to update the design. However, each time I attempt to build or run the project, it dismisses all of the changes I&apo ...

cssreactjsgulp

Angular Material SlideToggle Fails to Toggle

I am having issues with a specific Angular component called "new-form" that incorporates a slide toggle feature from the Angular Material library. Despite rendering on the client side, the slide toggle does not respond to clicks when interacted with. Even ...

angularangular-materialslidetoggle

Enhance text by hovering over it

I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item. Scenario: 1: Hover over Element one ELEMENT ONE ELEMENT TWO ELEM ...

javascriptjqueryhtmlcss

Unraveling Complex Observables with RxJS

I am facing a challenge with Rxjs that I need help solving. The data returned from the API looks like this: [ { name : test1, code : [1, 2] }, { name : test2, code : [1, 2, 3] }, ... ] What I want to achieve using Rxjs is to t ...

angularrxjs