input border color css code example

Example 1: change border highlight color on an input text element

input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
textarea:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}

Example 2: change input border color when selected

input:focus {
	outline: none;
  	border: 1px solid red;
}

Example 3: change border highlight color on an input text element

.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}

Example 4: add border to input css

border: none;
border-bottom: 1px solid blue;

Example 5: input backgound color

<input style="background-color: gold;" type="text" value="">

Example 6: how to change input border color with js

document.getElementById("fName").className = document.getElementById("fName").className + " error";  // this adds the error class

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class