CSS input effect not working if required is removed

Question

The label effect will work if required is there in input tag. But the effect will not work if i remove the required attribute Click to see working fiddle Is there any solution for this.

html

<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>

Snippet:

.module-input {
  font-size: 14px;
  padding-top: 12px;
  display: block;
  width: 97%;
  border: none;
  border-bottom: 1px solid #94a3a9;
  background-color: transparent;
  color: #5a686d;
  margin-bottom: 2%;
}

input:focus {
  outline: none;
}

.group {
  position: relative;
  margin-bottom: 25px;
}


/* LABEL */

label {
  color: #94a3a9;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0.5%;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}


/* active state */

input:focus+label,
input:valid+label {
  top: -8px;
  font-size: 12px;
  color: #94a3a9;
}

<div class="group ">
  <input type="text" class="module-input" />
  <label>Name</label>
</div>

What effect? Include all relevant code in your question. You've just shown the markup. Where is the CSS? Do not link to external sites, show what you have in the question itself. — Abhitalks, Apr 07 '17 at 07:29
Rahul, that is what I said. You should not force people to go to external sites. Include all relevant code in the question itself. — Abhitalks, Apr 07 '17 at 07:32
Have upvoted. Actually a good question this is, especially now that it is complete. — Abhitalks, Apr 07 '17 at 07:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/140173/discussion-between-rahul-patel-and-abhitalks). — rahul patel, Apr 07 '17 at 11:36

Asons · Answer 1 · 2017-04-07T12:46:39.480

6

If you update the rule with the attribute selector, input[required]:valid ~ label, this it will work, both with and without the required attribute

What happens is when an input does not have the reqiured attribute it is considered valid, hence the rule kick in immediately.

Updated

To be able to handle this properly, since :empty won't work on input elements, I added a small script and an attribute selector, which being set on a change and then the CSS rule check if it's empty

window.addEventListener('load', function() {
  var inp = document.querySelectorAll('input');
  for (var i = 0; i < inp.length; i++) {
    inp[i].addEventListener('change', function() {
      this.setAttribute("data-value", this.value);
    })
  }
})

.module-input {
  font-size: 14px;
  padding-top: 12px;
  display: block;
  width: 97%;
  border: none;
  border-bottom: 1px solid #94a3a9;
  background-color: transparent;
  color: #5a686d;
  margin-bottom: 2%;
}

input:focus {
  outline: none;
}

.group {
  position: relative;
  margin-bottom: 25px;
}


/* LABEL */

label {
  color: #94a3a9;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0.5%;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}


/* active state */

input[data-value]:not([data-value=""]) ~ label,
input:focus ~ label {
  top: -8px;
  font-size: 12px;
  color: #94a3a9;
}

<div class="group ">
  <input type="text" class="module-input" required="" />
  <label>Name</label>
</div>
<div class="group ">
  <input type="text" class="module-input" />
  <label>Address</label>
</div>

edited Apr 07 '17 at 12:46

answered Apr 07 '17 at 07:29

Asons

84,923
12
110
165

type a value in address and focus to another input field.. the label will come down – rahul patel Apr 07 '17 at 11:20
@rahulpatel Updated my answer – Asons Apr 07 '17 at 12:22
`$(".group input").focusout(function(){ if($(this).val() != ""){ $(this).addClass("has-content"); }else{ $(this).removeClass("has-content"); } });` and in css `input:focus ~ label, input[required]:valid ~ label,.has-content.module-input ~ label {...}` will do the trick – rahul patel Apr 07 '17 at 12:45
@rahulpatel That will most likely work too, I just trust the `change` event more than the `focusout` ... :) – Asons Apr 07 '17 at 12:49
Cross browser support ?? – rahul patel Apr 07 '17 at 12:52
@rahulpatel All and from IE9 ... do you need IE8? – Asons Apr 07 '17 at 12:56
no just a clarification thank u :) – rahul patel Apr 07 '17 at 12:58
@LGSon i just put js without load or even not loading doesn't work, please check mine in here http://jsfiddle.net/kqxyhagf/ – Freddy Sidauruk Nov 28 '18 at 05:55
@FreddySidauruk Just did...works just fine, so how does it not work for you? .. Which browser do you use? – Asons Nov 28 '18 at 12:43
@LGSon Hey thanks for your response, i just forgot to load js when DOM is ready, by the way i have input type which is value from cookie, if exist then i put in it, but the label doesn't move, demo is here http://jsfiddle.net/dauruk0512/bndqjca5/2/ – Freddy Sidauruk Nov 30 '18 at 23:43
@FreddySidauruk You sample doesn't work on load as the custom attribute `data-value` isn't there yet, it gets added when someone add a value (change the value and you'll see it works). A solution for your case would be to instead use the standard `value` attribute: http://jsfiddle.net/85dxs34z/ – Asons Dec 01 '18 at 09:07
@FreddySidauruk The standard `value` attribute never gets change on user input, it always holds what is given to it when markup is rendered, hence use it in CSS won't work by default. My small script change that and update it with the user input and make it possible to target with CSS. – Asons Dec 01 '18 at 09:11
@FreddySidauruk I also now closed the question with a later answer of mine, one I just remembered, which show how-to with the standard `value` attribute: https://stackoverflow.com/questions/44333727/simulation-of-a-placeholder – Asons Dec 01 '18 at 09:18
@LGSon i found bug, let say i have pages register and login while user in pages login, they click href goes to register when they typing effect place holder doesn't work, please last question cause i'm trying change another method doesn't work at all – Freddy Sidauruk Dec 05 '18 at 13:16
@FreddySidauruk Can't help with code I can't see. Post another e.g. jsfiddle showing the issue. – Asons Dec 05 '18 at 13:27
@LGSon that what i mean, is it polite post my real demo here ? so you can testing – Freddy Sidauruk Dec 05 '18 at 13:29
@FreddySidauruk It is okay to post a fiddle demo here as I asked for one. – Asons Dec 05 '18 at 13:33
@LGSon fiddle doesn't allow create multiple pages, isn't it ? – Freddy Sidauruk Dec 05 '18 at 13:40
@LGSon why in this demo work perfectly by the way i use nuxt https://plnkr.co/edit/nYjRaTox3A1NqNaUJ1A6?p=preview – Freddy Sidauruk Dec 05 '18 at 13:48
@FreddySidauruk You can't use an `` like that. It won't submit the form. You need an `` and all inputs wrapped in a `
`, and the button you can style like a link if you want, e.g. like this: https://plnkr.co/edit/LQNtba6eEZWrdy4Ujp6n?p=preview
– Asons Dec 05 '18 at 14:37
@FreddySidauruk And for me labels work just fine, moving back and forth if there is a value, either at load or when typing. – Asons Dec 05 '18 at 14:46
@LGSon i have problem when user typing in register then i move bye clicking register the labels doesn't work that's why i put link not submit button – Freddy Sidauruk Dec 05 '18 at 14:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184760/discussion-between-freddy-sidauruk-and-lgson). – Freddy Sidauruk Dec 05 '18 at 14:49

score 5 · Accepted Answer · answered Apr 07 '17 at 07:30

5

You have the CSS as input:valid ~ label Which means: put the label on top if the input is valid.

When you remove the required attribute, the input becomes valid by default. So without the required attribute, the label effect wont work by default.

You should use something like input[required]:valid ~ label

answered Apr 07 '17 at 07:30

Jones Joseph

4,703
3
22
40

1

A better way would be to use CSS3 selectors. Define your styles on `input:required:valid + label, input:focus + label {...`. i.e. use the `:required` selector along with `:valid`. This allows you to fluidly chain the style on different types of input constraints. e.g. `input:in-range` or `input:out-of-range` or `input:optional` etc. – Abhitalks Apr 07 '17 at 07:42
check this https://jsfiddle.net/Rahul_Patel_S_G/sy83j3q2/24/ if i type a value and if i focus it to another text box the css will not work. – rahul patel Apr 07 '17 at 11:49
@rahulpatel: That is not possible with CSS. You will JS for that. Reason = `:empty` selector does not work with `input`s. – Abhitalks Apr 07 '17 at 11:51
ya i debugged the focusout problem through JS, but when i assign a value to a input from angular the label effect will not work. any solution for that?? – rahul patel Apr 07 '17 at 12:07
@rahulpatel would you post your final code so people like me happy cause i got bugs with someone solution in bellow – Freddy Sidauruk Dec 05 '18 at 13:23

score 1 · Answer 3 · answered Apr 07 '17 at 07:30

1

When you don't place required, the input:valid ~ label properties in css are used because your input is not required, so it is valid

answered Apr 07 '17 at 07:30

Theo

157
12

Got it thank you :) – rahul patel Apr 07 '17 at 07:36

score 1 · Answer 4 · answered Apr 07 '17 at 07:46

1

Just remove tilde ~ sign from valid

input:focus~label,
input:valid label {
top: -8px;
font-size: 12px;
color: #94a3a9;
}

after this doesn't matter using Required or not.

answered Apr 07 '17 at 07:46

Shakil Ahmad

143
1
2
13

CSS input effect not working if required is removed

4 Answers4

Linked