1

I have a form with floating labels, where I am checking if the input is valid or on focus, to raise the floating label above the input fields. But when I have some invalid input on the email type of input field, then the floating label overlaps with text if I lose focus on that field. This is the template:

    <div v-if="input.type != 'submit' && input.type != 'textarea'" class="control">
      <input
        :ref="input.label.toLowerCase()"
        class="input is-large"
        :type="input.type"
        :name="input.label.toLowerCase()"
        :required="input.required == 1">
      <label>{{ input.label }}</label>
    </div>
    <div v-if="input.type == 'textarea'" class="control">
      <textarea
        :ref="input.label.toLowerCase()"
        class="textarea"
        :name="input.label.toLowerCase()">
      </textarea>
      <label>{{ input.label }}</label>
    </div>

And this is the css:

input:focus { outline:none;}

label {
  color: #999;
  font-size: 1rem;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 20px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

input:focus ~ label, input:valid ~ label, textarea:valid ~ label, textarea:focus ~ label{
  top: -20px;
  font-size: 0.8rem;
}

Is there a way to check if the input has a value with css?

Dmitry
  • 6,716
  • 14
  • 37
  • 39
Leff
  • 1,968
  • 24
  • 97
  • 201
  • Look at [this](https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no#answer-16956610) answer. You can add `required` to the input field (I'm not sure what Vue's `:required` does, may be it's already there). Add `pattern` attribute and use `:valid` and `:invalid` CSS pseudo classes. – Dmitry Dec 12 '17 at 09:54
  • I am already using required and :valid classes. The problem is that when the email field has an invalid value, the floating label is not up. – Leff Dec 12 '17 at 09:58
  • Is it ``? – Dmitry Dec 12 '17 at 10:01
  • Yes, that is the case – Leff Dec 12 '17 at 10:12
  • https://jsfiddle.net/hp3w6qdr/ seems to work OK with your CSS. – Dmitry Dec 12 '17 at 10:20
  • 1
    No, even your example is not working, when the email field has some value that is invalid and when you lose focus from it. That is the case when the floating label goes down again. – Leff Dec 12 '17 at 10:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161009/discussion-between-dmitry-and-leff). – Dmitry Dec 12 '17 at 10:29

0 Answers0