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

Question

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>

Not entirely sure what you're asking for. I think you want the label to be translated regardless of whether it's valid or not, IF the input is not empty? — Tieson T.
– Tieson T., Commented Mar 15, 2020 at 5:26
Yes, On both focus and valid it is supposed to be translated! — Shahab12
– Shahab12, Commented Mar 15, 2020 at 5:28
"valid" means that the input is not empty and that the pattern is matched. Your selector won't select the label if the input is invalid, which would be either empty or not matching the pattern. — Tieson T.
– Tieson T., Commented Mar 15, 2020 at 5:30
Yes i am aware of that, But is there anyway to make it happen regardless of validity of the input? — Shahab12
– Shahab12, Commented Mar 15, 2020 at 5:36
There isn't a selector for "input has value" in CSS. input[value=""] only works if the input's value was set to exactly that before loading the page, and it doesn't respond to changes in the input's value. You'd have to use some sort of JavaScript to set something along the lines of an "is-dirty" class and use that in your CSS. That's pretty much what frameworks like Knockout.js do (no idea about Angular, React, etc.). — Tieson T.
– Tieson T., Commented Mar 15, 2020 at 5:43

Temani Afif · Accepted Answer · 2020-03-15 11:08:36Z

2

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>

answered Mar 15, 2020 at 11:08

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tieson T. Over a year ago

Pretty good support for :placeholder-shown, too: caniuse.com/#feat=css-placeholder-shown - might need an extra selector for IE, if that support is needed.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related