What is the best way to adjust the border-radius of a mat-form-field in Angular?

  <mat-form-field class="new-inputs" style="border-radius: 10px;">
                <mat-label>Ime</mat-label>
                <input matInput type="text" maxlength="15"  id="firstName" formControlName="firstName" required
                       [class.ng-invalid]="userData.get('firstName')?.invalid && userData.get('firstName')?.touched"
                       [class.ng-touched]="userData.get('firstName')?.touched">
               <!-- <input matInput style="font-weight: normal">-->
              </mat-form-field>

I’m struggling to modify the border-radius of the mat-form-field, despite my efforts. I’m currently using the standard mat-form-field without appearance taken into account. Unsure if this is contributing to the issue. The existing form field does not meet design standards and must be updated.

If I make changes using the F12 console, the border radius does adjust. However, outside of that method, I’ve only been successful in altering the placeholder font weight to normal and adjusting the background color (although this poses some minor issues). I attempted to use ng-deep, but it appears to have been deprecated.

cssangulartypescriptangular-material

Answer №1

To customize the border-radius of a Mat-Form-Field in CSS, follow these steps:

Firstly, adjust the left-side border-radius with the following code:

.mdc-notched-outline__leading {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

For the right-side border-radius customization, use the code snippet below:

.mdc-notched-outline__trailing {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

Remember to incorporate this CSS into your style.css file to implement it across all elements.

If you only need this style for a specific mat-form-field, create a unique class and apply the CSS using that custom class as a prefix.

Answer №2

It seems like you are searching for the fieldset element.

Here's how it should look:

<fieldset style="border-radius:10px;">
 <legend>My Title</legend>
  <mat-form-field class="new-inputs">
     <mat-label>Name</mat-label>
     <input matInput type="text" maxlength="15"  id="firstName" formControlName="firstName" required
        [class.ng-invalid]="userData.get('firstName')?.invalid && userData.get('firstName')?.touched"
        [class.ng-touched]="userData.get('firstName')?.touched">
     <!-- <input matInput style="font-weight: normal">-->
   </mat-form-field>
</fieldset>

If that's not what you're looking for, perhaps you are interested in adding a border with the border-radius:10px; property. However, if there is no existing border, you won't see the effect of the border-radius.

In that case, you'll need to first set a border and then apply a border-radius:

<mat-form-field class="new-inputs" style="border:1px solid blue;border-radius:10px;">
     <mat-label>Name</mat-label>
     <input matInput type="text" maxlength="15"  id="firstName" formControlName="firstName" required
        [class.ng-invalid]="userData.get('firstName')?.invalid && userData.get('firstName')?.touched"
        [class.ng-touched]="userData.get('firstName')?.touched">
     <!-- <input matInput style="font-weight: normal">-->
</mat-form-field>

This information might address your query or provide some assistance in solving your issue.

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

Is there a way to enlarge all web page elements simultaneously without causing displacement?

Essentially, I am attempting to replicate the functionality that Twitter has on their webpage when you use CTRL+ to zoom in or increase the size of the web page. http://twitter.com/ Currently, I am experiencing displacement of elements upon zoom in and h ...

htmlcss

Configuring Media Query for iPad Air and iPad Pro

I'm facing a challenge setting up media queries for different iPad devices in my Next.js code. I have three cards (or divs) arranged in a row, utilizing the React-Bootstrap grid system for layout. While the cards default to full width within the grid ...

htmlcssnext.jsipadresponsive-design

Switch between active tabs (Typescript)

I am working with an array of tabs and here is the code snippet: const navTabs: ITab[] = [ { Name: allTab, Icon: 'gs-all', Selected: true }, { Name: sources.corporateResources, Icon: 'gs-resources', Selected: false }, { Name ...

javascriptangulartypescript

Struggling with getting autocomplete and auto import to work properly while working on an Angular project

After installing the latest version of VSCode on my Windows system, I proceeded to add language support for TypeScript and configure my editor settings by adjusting the font size, disabling the minimap, enabling autosave on focus change, and more. Addition ...

angulartypescriptvisual-studio-code

The attribute 'getValue' is not a valid property for the data type 'Subject<boolean>'

Currently, I am working with Angular2 and have a BehaviorSubject. isOpen$: Subject<boolean> = new BehaviorSubject<boolean>(true); When I try to retrieve the latest value using: isOpen$.getValue() It functions correctly, however, there is a ...

typescriptangularrxjs5

Delay the loading of CSS files until after the page has fully loaded in order to implement animations with

My angular 4 project has animation added in a CSS file, with classes applied to elements for animation on page load. However, it is currently not working properly on the first page load. The app takes time to fully load and the CSS animations apply intermi ...

cssangularanimation

Animating toggled classes in React can be achieved by utilizing keyframe animations or

I am looking to implement a simple transition/animation using React and CSS. The concept is to have an image that, when clicked, toggles a new section below with a nice transition effect. This is my React code: const [show, setShow] = useState(false); & ...

javascriptjquerycssreactjs

I am experiencing a strange situation in node.js where the `then` condition of a Promise is not being executed as expected

I am currently troubleshooting a Promise scenario and I am puzzled as to why the second then condition is failing to execute in the setup method. In my app.js code, I can see that the initialize() function is being called and it properly awaits the complet ...

node.jstypescriptes6-promise

The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...

css

Equal height elements - Bootstrap

Is there a way to make all elements in a list the same height, even if one element has more text than the others? I've been using divs for this purpose, but I'm open to switching to li items. Any advice on the best approach? I'm currently w ...

htmlcsstwitter-bootstrap

Listening for a long press in Angular 2: A step-by-step guide

Check out this link for an AngularJS example. Curious how this functionality translates to Angular 2? ...

angulartypescript

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

javascriptreactjstypescript

Flipped the dimensions of an image for better responsiveness

Trying to implement this particular design on a responsive website. Wondering if there's a way to establish an inverse resizing technique using jQuery / Javascript so that as the viewport shrinks, the text size increases. Attempted to use jQuery to a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Resolving problems with the positioning of the navigation bar

I am in the process of creating a simple website, but I am encountering an issue with the menu bar shifting below the "Contact for Services" section when I view the page in different resolutions. Is there a way to lock the position of the menu bar so that ...

htmlcssmenunavigationresolution

Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...

javascriptasp.netcss

Why is IE6 adding an additional margin of 50px? My code seems to be causing this issue

Currently I am working on creating a custom IE6 CSS. However, I am facing an issue where an extra 50px is being added to the header div. Even though I have set the header size to 109px, it is displaying at 159px. When I add any element below the header div ...

htmlcssinternet-explorer-6

Unable to collapse the Bootstrap dropdown menu

For the life of me, I can't seem to find a solution to my problem. I'm currently working on creating a responsive navbar for my website by following a tutorial. The goal is to make it mobile-friendly with a button that expands the menu on smaller ...

javascriptjqueryhtmlcsstwitter-bootstrap

What's the best way to convert a Union type into a Tuple with the same number of elements

My goal is to transform the following code snippet: type UnionType = Variant1 | Variant2 into the desired format below: type ResultingType = [UnionType, UnionType] In case the union comprises 3 member types, the tuple should contain 3 elements accordin ...

typescripttypescript-generics

Preventing data binding for a specific variable in Angular 2: Tips and tricks

How can I prevent data binding for a specific variable? Here's my current approach: // In my case, data is mostly an object. // I would prefer a global solution function(data) { d = data; // This variable changes based on user input oldD = da ...

javascriptangulartypescript

Experiencing an abundance of issues with html-webpack-plugin while incorporating TypeScript

I am working on a project that involves using Webpack and TypeScript. However, when attempting to run the development server, I encountered numerous errors related to the html-webpack-plugin. This is a snippet of the output: > [email protected] dev ...

typescriptwebpackhtml-webpack-plugin