First-time poster, so I apologize in advance if I'm omitting anything or not following accepted posting protocol. :) Any suggestions are welcome!

I'm having some trouble getting a CSS transition effect to work on parts of a form - specifically a textarea and two number fields. As you'll see in the demo code, when a user clicks on a form element, the label is meant to shrink and move upwards, out of the way of the text being entered. It stays there if something is entered, and returns to its normal location if the user moves on or doesn't enter something. The :focus and :valid pseudo-classes work on most elements, so I'm sure there's something I'm not understanding about the textarea and number element validity.

This is my transition code:

input:focus ~ label, input:valid ~ label, textarea:focus ~ label, select:focus ~ label, select:valid ~ label {
font-size: 0.75em;
color: #fff;
top: -5px;
-webkit-transition: all 0.225s ease;
transition: all 0.225s ease;

}

...but adding textarea:valid ~ label does not have the intended effect. Also, numbers is already covered in that code via input, but it doesn't have the intended effect either.

I didn't bother pasting the form in its entirety - but please compare the properly-functioning effect from the First and Last Name and Country fields with the fields below.

Codepen demo

Any help is appreciated - thanks in advance!

CodePudding user response：

body {
  background-color: #E9CDE4;
  background-image: url("assets/logo_back.jpg");
  background-size: repeat-x repeat-y;
  display: flex;
  justify-content: center;
  font-family: Roboto, Arial, sans-serif;
  font-size: 15px;
}

.container {
  padding: 20px;
  margin-left: 50px;
}

.styled-input {
  float: left;
  width: 318px;
  margin: 1rem 0;
  position: relative;
  border-radius: 4px;
}

.styled-input.wide {
  width: 700px;
  max-width: 100%;
}

.styled-input label {
  color: #666;
  padding: 1.3rem 30px 1rem 30px;
  position: absolute;
  top: 10px;
  left: 0;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  pointer-events: none;
}

input,
textarea,
select {
  padding: 30px;
  border: 0;
  width: 100%;
  font-size: 1rem;
  background-color: #E9CDE4;
  color: black;
  border-radius: 4px;
}

textarea {
  width: 100%;
  min-height: 10em;
}

input:focus,
textarea:focus {
  outline: 0;
  background: #D0A2CA;
}

input:not([type="number"]):focus~label,
input:not([type="number"]):valid~label,
textarea:focus~label,
textarea:not([data-val=""])~label,
select:focus~label,
select:valid~label {
  font-size: 0.75em;
  color: #fff;
  top: -5px;
  -webkit-transition: all 0.225s ease;
  transition: all 0.225s ease;
}

input[type="number"]:focus~label,
input[type="number"]:not([value=""])~label {
  font-size: 0.75em;
  color: #fff;
  top: -5px;
  -webkit-transition: all 0.225s ease;
  transition: all 0.225s ease;
}

<div >
  <div >
    <div >
      <div >
        <textarea name="form_comments" data-val="" onkeyup="(()=>{this.dataset.val=this.value})()"></textarea>
        <label>Additional instructions or comments (optional)</label>
      </div>
    </div>
  </div>

  <divhttps://stackoverflow.com/posts/73905218/edit# >
    <div >
      <div >
        <input  name="form_adultnum" type="number" min="0" onchange="this.setAttribute('value', this.value);" value="" />
        <label>Adult Beanies</label>
      </div>
    </div>
</div>
</div>

To use the :valid of a <textarea> element, you have to set some extra value e.g. minlength, maxlength, or required. textarea element

If you still want to keep the attribute, you can look into my code. I add a little bit of 'javascript' code into the textarea to catch the keyup event.

<textarea name="form_comments" data-val="" onkeyup="(()=>{this.dataset.val=this.value})()"></textarea>

And then use the CSS selector to select all textarea which value is empty textarea:not([data-val=""])~label

Update

I add modification to input[type="number"], additional you can use the attribute value instead of the data-val. With this type of input I have to separated it to another css block for easy modification