CODEWITHSUNDEEP
htmlcssvalidation
kalpeshshende
kalpeshshende

Reputation: 163

Why input:invalid is used as default instead of main input style?

I have refered some posts and this stackoverflow link too : Set input as invalid but didnt help much.

What I am trying to achieve is a normal styles input, when a user focuses the input we have border color changed. When we have a valid value in it we style it with input:valid else we style it with input:invalid.

I have almost achieved this however the input:invalid style is used as default. I want to have the border / background transparent initially.

body {
  height: 100vh;
  display: grid;
  align-items: center;
  margin: 0;
  padding: 0 60px;
}

div {
  display: grid;
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

input:focus,
input:hover {
  border-bottom-color: dodgerblue;
}

input:invalid {
  border-bottom-color: red;
  background: red;
  color: white;
}

input:valid {
  border-bottom-color: green;
  background: green;
  color: white;
}

input:valid+.icon:after {
  font-family: "Font Awesome 5 Free";
  content: "\f599";
  color: white;
  font-weight: 900;
}

input:invalid+.icon:after {
  font-family: "Font Awesome 5 Free";
  content: "\f119";
  font-weight: 900;
  color: white;
}

.icon {
  position: absolute;
  right: 0;
  height: 35px;
  width: 35px;
  display: grid;
  place-items: center;
}

input {
  border: none;
  outline: none;
  border-bottom: 2px solid black;
  height: 35px;
  padding: 10px;
  padding-right: 35px;
  box-sizing: border-box;
  transition: all 500ms linear;
}
<div>

  <input type="email" pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+" title="enter your email" placeholder="enter your email" required>
  <span class="icon">
        
      </span>
</div>

Upvotes: 1

Views: 657

Answers (1)

Ahmet Zeybek
Ahmet Zeybek

Reputation: 1224

You can use :placeholder-shown selector for empty state. There is :blank selector for input elements, but it is currently experimental.

body{
  height:100vh;
  display:grid;
  align-items:center;
  margin:0;
  padding:0 60px;
}
div{
  display:grid;
  position:relative;
  max-width:500px;
  margin:0 auto;
}

input:focus,input:hover{
  border-bottom-color:dodgerblue;
}
input:invalid{
  border-bottom-color:red;
  background:red;
  color:white;
}
input:valid{
  border-bottom-color:green;
  background:green;
  color:white;
}
input:valid + .icon:after{
  font-family: "Font Awesome 5 Free";
   content:"\f599";
  color:white;
  font-weight:900;
}
input:invalid + .icon:after{
  font-family: "Font Awesome 5 Free";
  content:"\f119";
  font-weight:900;
  color:white;
}
.icon{
  position:absolute;
  right:0;
  height:35px;
  width:35px;
  display:grid;
  place-items:center;
}
input{
  border:none;
  outline:none;
  border-bottom:2px solid black;
  height:35px; 
  padding:10px;
  padding-right:35px;
  box-sizing:border-box;
  transition:all 500ms linear;
}
input:placeholder-shown {
  border-bottom-color:pink;
  background:pink;
  color:black;
}
<div>

  <input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="enter your email"
    placeholder="enter your email"
    required>
  <span class="icon">

  </span>
</div>

Upvotes: 4

Related Questions