Home / Questions / 543524
Accepted
Max Jimenez
Asked: 2022-08-29 14:32:32 +0800 CST 2022-08-29 14:32:32 +0800 CST

How to validate the input with Css to style your label?

  • 772

I have the following code.

.form-group{
    position: relative;
    margin-bottom: 2.5rem;
    padding-top:1rem;
}

.form-group label{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(16px, 16px);
    transform-origin: left;
    transition: transform .25s;
    color: #bfbfbf;
    width: 90%;
}
.form-group:focus-within label{
    transform: translate(0, -6px) scale(.8);
    color: #707070;
    white-space: nowrap;
}
<div class="form-group">
    <input class="form-control" type="text" id="url" aria-describedby="namelHelp" required>
    <label for="url">Full Name</label>
    <small id="namelHelp" class="form-text text-muted"></small>
</div>

The effect is super cool but I need to validate with css the fact that the input is no longer empty to be able to set some final styles of said label when the user has already entered the data in the input.

css

1 Answers

  1. Best Answer

    Perhaps this will work for you, using the :valid pseudo-class and invoking its sister label element via the CSS selector + . Add it to your css and try it out (not sure if it's supported in all browsers):

    .form-group > input:valid + label{
    transform: translate(0, -6px) scale(.8);
    color: #707070;
    white-space: nowrap;
}

    Example:

    .form-group {
  position: relative;
  margin-bottom: 2.5rem;
  padding-top: 1rem;
}

.form-group label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(16px, 16px);
  transform-origin: left;
  transition: transform .25s;
  color: #bfbfbf;
  width: 90%;
}

.form-group:focus-within label {
  transform: translate(0, -6px) scale(.8);
  color: #707070;
  white-space: nowrap;
}

.form-group>input:valid+label {
  transform: translate(0, -6px) scale(.8);
  color: #707070;
  white-space: nowrap;
}
    <div class="form-group">
  <input class="form-control" type="text" id="url" aria-describedby="namelHelp" required>
  <label for="url">Full Name</label>
  <small id="namelHelp" class="form-text text-muted"></small>
</div>

    • 1