2

I am building a little custom input for my project, where the it has a little label that moves around when the user interacts with it. So far it has been working ok , but I noticed if the field is invalid and the user removes focus from the input the label i have set moves back to it's original position and goes over the actual input text.

See what I mean here - this field is type email and if you type in just "a" for example and unfocus the input, the label will fall back down over the input's text

http://codepen.io/ajmajma/pen/RobGbj?editors=1100

Here is the html I have so far :

 <div class="container">
  <form>

    <div class="test-input">      
      <input type="email" required>
      <label>Email</label>
    </div>

  </form>
</div>

And the scss for the input: 

  .test-input  {
  position:relative;
  margin-bottom:45px;

  input         {
    font-size:14px;
    height: 50px;
    padding:20px 10px 10px 10px;
    display:block;
    width:300px;
    border:none;
    border:1px solid #979797;
  }

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

  input:focus ~ label, input:valid ~ label    {
    top: 6px;
    left: 10px;
    font-size:12px;
    color: #999;
  }
}

I'm not sure I want to use that required tag itself, but it is enabling me to keep the label flag above the text when the user leaves the focus of the input itself.

It would be great to not have to be dependent on the required tag as some of the fields won't actually be required in the form they are being used in. Is there another was to approach/fix this ? I looking into the css3 psuedo class selectors (http://www.w3schools.com/Css/css_pseudo_classes.asp) for inputs but I'm not sure what I could use to more specifically target the use case I am looking for. Thanks for reading!

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • So, when should it actually come down to its original position? Or should it never come down at all after first time focus? – Harry Nov 02 '16 at 14:57
  • @Harry should only come down when there is no text in the input. – ajmajmajma Nov 02 '16 at 14:58
  • Interesting question. I wonder if there is any option currently in CSS to achieve this (other than combining with `required` or using HTML5 pattern matching). – Harry Nov 02 '16 at 15:08
  • 1
    I'm thinking I might just need to do with with some JS – ajmajmajma Nov 02 '16 at 15:22
  • 1
    If it should only be triggered when the input is empty, this question is an exact duplicate. One of the more recent [answers on the dupe](http://stackoverflow.com/a/35593489/1016716) looks nice though, the one about [:placeholder-shown](https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown). That one holds promise. – Mr Lister Nov 03 '16 at 07:56
  • @MrLister that selector would be perfect if it was adopted by all the modern browsers :(. – ajmajmajma Nov 04 '16 at 13:34
  • @ajmajmajma Just a matter of time. – Mr Lister Nov 04 '16 at 16:42

0 Answers0