Input field styling-CodePudding

I want when user focuses on input field the label and border of input field should be red and when user leaves both label and border of input field should turn to green. Also when user focuses and does not enter any value both label and border again in red color.

.field {
  position: relative;
}

.inName {
  position: absolute;
  outline: none;
  z-index: 1;
  border: 1px solid silver;
}

.laName {
  position: absolute;
  top: 7px;
  left: 10px;
  pointer-events: none;
  font-size: 20px;
  color: rgb(95, 99, 105);
  z-index: 1;
  background: #fff;
  transition: .3s;
}

.inName:focus .laName {
  top: -12px;
  font-size: 15px;
  padding: 0 5px;
  color: crimson;
}

.inName:not(:placeholder-shown).inName:not(:focus) .laName {
  position: absolute;
  top: -12px;
  pointer-events: none;
  padding: 0 5px;
  font-size: 15px;
  background-color: #ffffff;
  color: crimson;
  z-index: 1;
  transition: .3s;
}

.inName:focus {
  border: 1px solid crimson;
}

<div >
  <input type="text"  placeholder=" ">
  <label for="" >Name</label>
</div>

CodePudding user response：

Here, I think you could add color: green in your .inName:not(:placeholder-shown).inName:not(:focus) .laName class and also add another class .inName:not(:placeholder-shown).inName:not(:focus) that will have border set to green. Here's your code with the changes(I commented where the changes are):

<!DOCTYPE html><html>

<head>
<style>
    .field {
    position: relative;
    }

    .inName {
    position: absolute;
    outline: none;
    z-index: 1;
    border: 1px solid silver;
    }

    .laName { 
    position: absolute;
    top: 7px;
    left: 10px;
    pointer-events: none;
    font-size: 20px;
    color: rgb(95, 99, 105);
    z-index: 1;
    background: #fff;
    transition: .3s;
    }

     .inName:focus .laName {
     top: -12px;
     font-size: 15px;
     padding: 0 5px;
     color: crimson;
     }

    .inName:not(:placeholder-shown).inName:not(:focus) .laName {
position: absolute;
top: -12px;
pointer-events: none;
padding: 0 5px;
font-size: 15px;
background-color: #ffffff;
/*CHANGE HERE COLOR TO GREEN*/
color: green;
z-index: 1;
transition: .3s;
}

.inName:focus {
border: 1px solid crimson;
} 
/*ADD THIS*/
.inName:not(:placeholder-shown).inName:not(:focus){
    border: 1px solid green;
}


</style>
</head>
<body>

<div >
<input type="text"  placeholder=" ">
<label for="" >Name</label>
</div>


</body>
</html>

CodePudding user response：

That can be done using JS event listeners - focus and change

Here is a fast scratch of what you can do:

document.getElementsByTagName("input")[0].addEventListener("focus", focus);
document.getElementsByTagName("input")[0].addEventListener("change", focus);

function focus() {
  var input = document.getElementsByTagName("input")[0];
  if (input.value.length === 0) {
    input.style.borderColor = "red"; // for input
    input.nextElementSibling.style.color = "red"; // for label
  } else {
    input.style.borderColor = "green"; // for input
    input.nextElementSibling.style.color = "green"; // for label
  }
}

Also set input border color to green in CSS as default for the first load.