How to change border color on multiple input fields

Posted by Ervin Adams on July 11, 2022

How to change border color on multiple input fields

Posted by Ervin Adams on July 11, 2022

You can change multiple input fields border color using the examples below:

These are the input fields:

<div className="input-wrapper">
    <input type="text" className="title int-chg" name="title"/>
    <input type="text" className="author int-chg" name="author"/>
    <input type="text" className="publication int-chg" name="publication"/>
</div>

Change border color by type:

input[type="text"]{
  border-color: #c40101;
}

Or by class on input field:

.int-chg{
  border-color: #c40101;
}

Or by input fields specific to wrapper:

.input-wrapper input[type="text"]{
  border-color: #c40101;
}

Using one example from above to:

Change color and depth:

.input-wrapper input[type="text"]{
  border: 1px solid #c40101;
}

Change color on focus:

.input-wrapper input[type="text"]:focus{
  outline-color: #c40101;
}

Change color and depth on focus:

.input-wrapper input[type="text"]:focus{
  outline: none !important;
  border: 1px solid #c40101;
}