DEMO BELOW
See the Pen CSS3 Pop Up Form with Labels by ogbugbu (@ogbugbu) on CodePen.
<<HTML CODE>>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="owoctlabel"> <form> <div class="owoctlabel"> <input id="name" placeholder="Name" type="text"> <label for="name">Name</label> </div> <div class="owoctlabel"> <input id="email" placeholder="Email Address" type="text"> <label for="email">Email Address</label> </div> <div class="owoctlabel"> <input id="web_url" placeholder="Web Url " type="text"> <label for="email">Web Url</label> </div> <div class="owoctlabel"> <textarea id="feedback" placeholder="Feedback"></textarea> <label for="feedback">Feedback</label> </div> </form> </div> |
<<CSS CODE>>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
form div.owoctlabel{ /* div container for each form field with pop up label */ display: block; margin: 30px; font: 16px; position: relative; } form div.owoctlabel input[type="text"], form div.owoctlabel textarea{ width: 320px; padding: 10px; border: 1px solid #c3c3c3; border-radius: 7px; } form div.owoctlabel textarea{ height: 200px; } form div.owoctlabel label{ /* pop up label style */ position: absolute; left: 0; background: lightyellow; border: 1px solid yellow; border-radius: 2px; padding: 3px 10px; box-shadow: 4px 1px 5px gray; font-weight: bold; -webkit-backface-visibility: hidden; top: 10px; /* initial top position of label relative to dynamiclabel container */ -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */ -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; z-index: -1; } form div.owoctlabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */ border: 1px solid #45bcd2; box-shadow: 0 0 8px 2px #98d865; } form div.owoctlabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */ opacity: 1; z-index:100; top: -35px; /* Post top position of label on focus relative to dynamiclabel container */ -ms-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } #owoctlabel { background:grey; padding-top:10px; width:100%; text-align:center; border: dashed 20px red; } |
