How to customize the CSS style of input depending the value of the id-CodePudding

I am looking for a solution to customize the CSS of the form fields (for example: input) based on the value of the id.

This is an example of my issue:

HTML:

<input type="text" id="{{myVar.name}}"  />

My standard CSS:

input {
  width: 100%;
}

What I'm looking for is:

if myVar.name = val1, then use width: 30%; in CSS
if myVar.name = val2, then use width: 20%; in CSS

I've tried using selectors, but it just doesn't work:

input[id="val1"] {
   width: 30%;
}

Thanks in advance

CodePudding user response：

If you know the value of the variable you should use :

#val1 {
    /* your css code goes here */
}

CodePudding user response：

you need to define some CSS for the various id types eg:

if you need to set the width to 30% when the id of the element is "myId1" you need to specify this in your .css file

#myId1 {
    width: 30%;
}

so now when myVar will be "myId1" it will set the element's width to 30%

CodePudding user response：

Both of the other answers does answer your question, if you choose to do it that way and you have the values in advance and can add them to the CSS. But if you don't have that, you can apply the ngClass selector to an input. Here is an example from the project I'm working on right now, which demonstrates use of a conditional to apply a class:

<input type="text"
   [ngClass]="ingredient.drugName == 'DRUG NAME NOT FOUND'
     ? 'text-danger fw-bold' //applying these two classes if the condition is met
     : '<some-other-class>'" //whatever class you want if the condition is false

Here is more info: https://angular.io/api/common/NgClass