The CSS input effect ceases to work when the 'required' attribute is taken out

Question

Recently, I've been trying to make a nice form but I came across some problems.

Basically when I remove the "required attribute" from the input everything stops working as it should. I found a fake solution i's just remove tilde ~ sign from valid like below:

.input-data input:valid ~ label {
  transform: translateY(-20px);
  fontsize: 14px; color: #2e4f5c;
}

But after this when I leave from the input the label comes back to the original position and doesn't keep like when I have focus and when the label goes down it covers the text that I entered.

This is a DEMO: https://jsfiddle.net/henriqpohl/wg5L94pk/5/

Does anyone have any idea how the input can work exactly the same as the input with the required attribute?

score 0 · Answer 1 · answered Aug 26 '23 at 03:12

When you remove the general sibling combinator (~), the selector then matches label that is a child of input. This matches nothing, so you could have deleted the entire selector.

The solution is answered in the question that is linked to in the comments of your question.

You'll need to use the :placeholder-shown pseudo-class along with the :not() pseudo-class to indicate when text has been entered into the input (and therefore the placeholder is no longer shown.)

input:not(:placeholder-shown) ~ label

You'll also need to use the placeholder attribute for the input element but the placeholder can be blank.

<input type="text" placeholder="">

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family:sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-family: sans-serif;
}
.container {
  max-width: 950px;
  background: #fff;
  width: 950px;
  padding: 25px 40px 10px 40px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.container .text {
  text-align: center;
  font-size: 41px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}
.container form {
  padding: 30px 0 0 0;
}
.container form .form-row {
  display: flex;
  margin: 32px 0;
}
form .form-row .input-data {
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;
}

form .form-row .input-data-check {
  width: 100%;
  margin: 0 20px;
  position: relative;
}

.input-data input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #2e4f5c;
}

.input-data label {
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.input-data .underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.input-data .underline:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background: #2e4f5c;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before {
  transform: scale(1);
}

<div class="container">
  <div class="text">MY FORM</div>

  <form action="#">
    <div class="form-row">
      <div class="input-data">
        <input type="text" placeholder="" required>
        <div class="underline"></div>
        <label for="">Nome</label>
      </div>
      <div class="input-data">
        <input type="text" placeholder="">
        <div class="underline"></div>
        <label for="">Empresa</label>
      </div>
    </div>

  </form>
</div>

The CSS input effect ceases to work when the 'required' attribute is taken out

1 Answers1