How to Cutomize 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(Ex: input) based on the value of the id , below 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 to put in css width: 30%;

if myVar.name = val2 to put in css width: 20%;

I've tried using the 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%