Hello!

I want to make such an input

http://codepen.io/ilwcss/pen/tAgqH

@import "nib" body padding:40px font-family:"Helvetica Neue" .input-wrapper position:relative line-height:14px margin:0 10px display:inline-block label color:#bbb font-size:11px text-transform:uppercase position:absolute z-index:2 left:20px top:14px padding:0 2px pointer-events:none background:white transition:transform 100ms ease transform:translateY(-20px) input font-size:13px color:#555 outline:none border:1px solid #bbb padding:10px 20px border-radius:20px position:relative &:invalid + label transform:translateY(0) &:focus border-color:#2b96f1 & + label color:#2b96f1 transform:translateY(-20px) 
 <div class="input-wrapper"> <input type="text" id="user" required> <label for="user">user name</label> </div> <div class="input-wrapper"> <input type="password" required> <label for="user">password</label> </div>

but it uses libraries and preprocessor.

How to pull out the necessary data from the library and make a regular CSS file?

    2 answers 2

    Morning is wiser than evening ... Here's a working version for you.

     .container { position: relative; } .container input { padding: .5em 1em; border: 1px solid #59d; border-radius: 2em; background-color: transparent; } .container input+span { position: absolute; left: .5em; top: calc(.5em - 2px); color: #bbb; z-index: -10; padding: 0 .5em; transition: .2s; } .container input:focus+span, .container input:valid+span { z-index: 10; top: 0; transform: translatey(-50%); background-color: white; } 
     <div class="container"> <input type="text" value="" required><span>Name</span> </div>

    • Thank! Everything is done with your help! In principle, the question is closed. - Oleg Perevyshin

    I don’t understand what kind of library you are talking about (I just copied and pasted the example below, it seems to be normal css and I don’t see any libraries here). If you mean nib, then this is not really a library, but rather an extension of the stylus to give cross-browser compatibility.

     body { padding: 40px; font-family: "Helvetica Neue"; } .input-wrapper { position: relative; line-height: 14px; margin: 0 10px; display: inline-block; } label { color: #bbb; font-size: 11px; text-transform: uppercase; position: absolute; z-index: 2; left: 20px; top: 14px; padding: 0 2px; pointer-events: none; background: #fff; -webkit-transition: -webkit-transform 100ms ease; -moz-transition: -moz-transform 100ms ease; -o-transition: -o-transform 100ms ease; -ms-transition: -ms-transform 100ms ease; transition: transform 100ms ease; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } input { font-size: 13px; color: #555; outline: none; border: 1px solid #bbb; padding: 10px 20px; border-radius: 20px; position: relative; } input:invalid + label { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } input:focus { border-color: #2b96f1; } input:focus + label { color: #2b96f1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 
     <div class="input-wrapper"> <input type="text" id="user" required> <label for="user">user name</label> </div> <div class="input-wrapper"> <input type="password" required> <label for="user">password</label> </div>

    If you suddenly do not know how to get the result of the preprocessor on the codepen, then here is the screenshot:

    enter image description here