CODEWITHSUNDEEP
htmlcssformsinput
Shahab12
Shahab12

Reputation: 31

"valid" pseudo class is not working on "required" email input if the input text format is NOT "email"

I want the span in my label to move up when my input is on focus and valid mode, on email type input, when i write anything but an email format text, and then focus out of the input, the span comes back down, I just want it to stay up even if the format of my text is not "email".

.form-group {
  position: relative;
  }
  .form-group input {
    width: 100%;
    height: 100%;
    color: #595f6e;
    padding-top: 20px;
    border: none;
    outline: none;
  }
  .form-group label {
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    width: 100%;
    border-bottom: 1px solid black;
    margin: 0 !important;
}
   .form-group label::after {
      content: "";
      position: absolute;
      left: 0px;
      bottom: -1px;
      height: 100%;
      width: 100%;
      border-bottom: 3px solid #5fa8d3;
      transform: translateX(-100%);
    }
    .form-group label .content-name {
      position: absolute;
      bottom: 5px;
      left: 0px;
      transition: all 0.3s ease;
    }


.form-group input:focus + .label-name .content-name,
.form-group input:valid + .label-name .content-name {
  transform: translateY(-80%);
  font-size: 14px;
  color: #5fa8d3;
}
    <form id="loginForm" action="{{ url_for('login.login') }}" method="POST">
                            <div class="form-group">

                                <input type="email" id="email" name="email"
                                    pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" required>
                                <label class="label-name">
                                    <span class="content-name">
                                        Name
                                    </span>
                                </label>
                            </div>
</form>

Upvotes: 3

Views: 783

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

Consider :focus and :placeholder-shown. The first one will activate when you are at the input and the second one when there is at least some content. Don't forget to add an empty placeholder or the trick won't work

.form-group {
  position: relative;
}

.form-group input {
  width: 100%;
  height: 100%;
  color: #595f6e;
  padding-top: 20px;
  border: none;
  outline: none;
}

.form-group label {
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  border-bottom: 1px solid black;
  margin: 0 !important;
}

.form-group label::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -1px;
  height: 100%;
  width: 100%;
  border-bottom: 3px solid #5fa8d3;
  transform: translateX(-100%);
}

.form-group label .content-name {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.3s ease;
}

.form-group input:not(:placeholder-shown) +.label-name .content-name,
.form-group input:focus +.label-name .content-name{
  transform: translateY(-80%);
  font-size: 14px;
  color: #5fa8d3;
}
<form id="loginForm" action="{{ url_for('login.login') }}" method="POST">
  <div class="form-group">

    <input type="email" id="email" name="email" placeholder=" " pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" required>
    <label class="label-name">
                                    <span class="content-name">
                                        Name
                                    </span>
                                </label>
  </div>
</form>

Upvotes: 2

Related Questions