CODEWITHSUNDEEP
htmlcssformsinputlabel
Sashaank
Sashaank

Reputation: 964

Why is floating label not working with css

I am try to recreate the floating labels from this tutorial.

when I add this code from the tutorial (check 15:00 in the tutorial)

.form-group input:focus + .label-name .content-name,
.form-group input:valid + .label-name .content-name {
  transform: translateY(-120%);
  font-size: 14px;
  color: #5fa8d3;
}

The label loses the floating effect. Check the image below. This state of the label should only be active when the input is focused. But for some weird reason this is the default state. This only happens when add .form-group input:valid + .label-name .content-name to the code above.

enter image description here

Here is my full code

.form-group {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.form-group input:focus {
  background-color: #fbf9fa;
}

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

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

.content-name {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.5s ease;
}

.form-group input:focus + .label-name .content-name,
.form-group input:valid + .label-name .content-name {
  transform: translateY(-120%);
  font-size: 14px;
  color: #5fa8d3;
}

html

<div class="form-group">
    <input type="text" class="form-control" name='input-name'>
    <label for="input-name" class='label-name'>
        <span class='content-name'>Enter your name</span>
    </label>
</div>

Upvotes: 1

Views: 828

Answers (1)

Pedro Estrada
Pedro Estrada

Reputation: 224

I don't have all your css, but with the snippet you gave I was able to get it working by adding the required attribute to the input.

When you don't have the required attribute, the input is always "valid". Therefore, the css selector that had :valid was always being applied.

See demo in the snippet below:

.form-group {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.form-group input:focus {
  background-color: #fbf9fa;
}

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

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

.content-name {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.5s ease;
}

.form-group input:focus + .label-name .content-name,
.form-group input:valid + .label-name .content-name {
  transform: translateY(-120%);
  font-size: 14px;
  color: #5fa8d3;
}
<div class="form-group">
    <input type="text" class="form-control" name='input-name' required>
    <label for="input-name" class='label-name'>
        <span class='content-name'>Enter your name</span>
    </label>
</div>

Upvotes: 2

Related Questions