Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Coyier's Input Form in CSS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #247782
    SumNeuron
    Participant

    Chris Coyier’s input validation at the bottom of his post here is nice. I would like to implement it. However I would like to do it in CSS3, not SCSS. Can some help me please:

    • translate it?
    • figure out how to send the form’s information as an email?

    Thanks!

    #247784
    Shikkediel
    Participant

    http://www.sassmeister.com/

    form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
    form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
    form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) {
      background: pink;
    }
    
    form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label,
    form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label,
    form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label {
      opacity: 0;
    }
    
    form > div > input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
    form > div > input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
    form > div > input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements {
      max-height: 200px;
      padding: 0 30px 20px 50px;
    }
    
    form > div .requirements {
      padding: 0 30px 0 50px;
      color: #999;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      color: red;
      font-style: italic;
    }
    

    Second part’s a whole different ball park…

    #247798
    Shikkediel
    Participant

    You could use Codepen for it as well buy the way, select “view compiled CSS” and do a copy and paste…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.