CODEWITHSUNDEEP
htmlcssinputlabelhidden
Seep Sooo
Seep Sooo

Reputation: 145

hiding text in css while input field is filled in html not working

i have an input box in html like below and its working fine:

.lolan:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<label for="name" class="form__label">Click "Download" To Get Your Card</label>

when the user types text the label will be shown. now i am adding one more label above the input box s that it will display before input box is filled and hide after input box is filled. I did the following code:

.lolan:placeholder-shown - .form__labell {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
<label for="name" class="form__labell">Click "Download" To Get Your Card</label>
<input class="lolan" type="text" id="name" placeholder="Full Name" required />

this is not working, can anyone please tell me what is wrong here

Upvotes: 0

Views: 871

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

the adjacent sibling combinator is + and the general sibling combinator is ~: there is no a previuos adjacent sibling combinator like -

You may keep the order of the elements in the markup as in the first example, but reversing them using flexbox and order property

div {
 display: flex;
}

input { order: 2 }
label { order: 1 }

input:not(:placeholder-shown) + label {
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateY(-4rem);
   transform: translateY(-4rem);
}
<div>
  <input class="lolan" type="text" id="name" placeholder="Full Name" required />
  <label for="name" class="form__labell">Click "Download" To Get Your Card</label>
</div>

Upvotes: 1

Related Questions