Pure CSS Float Label
Nghia Phan
Technical Guide
Views
Code collected from the Internet and saved here so I do not have to search for it again later 😊
{{< ads >}}
DEMO:
{{<tabs “Code”>}} {{<tab “HTML”>}}
<fieldset> <legend>Sign up</legend> <div class="input-group"> <div class="has-float-label"> <input id="first" type="text" placeholder="Name"/> <label for="first">First</label> </div> <div class="has-float-label"> <input id="last" type="text" placeholder="Surname"/> <label for="last">Last</label> </div> </div> <label class="has-float-label"> <input type="email" placeholder="[email protected]"/> <span>Email</span> </label> <label class="has-float-label"> <input type="password" placeholder="••••••••"/> <span>Password</span> </label> <button>Sign up</button></fieldset>{{}} {{<tab “SCSS/CSS”>}}
/* Powered by: https://github.com/tonystar/float-label-css *//* Re-usable mixins * https://github.com/tonystar/float-label-css/blob/master/scss/_mixins.scss */@mixin float-label-container { display: block; position: relative;}@mixin float-label { label, > span { position: absolute; left: 0; top: 0; cursor: text; font-size: 75%; opacity: 1; transition: all .2s; @content; }}@mixin float-label-input { &::placeholder { opacity: 1; transition: all .2s; } &:placeholder-shown:not(:focus)::placeholder { opacity: 0; }}@mixin float-label-scaled { &:placeholder-shown:not(:focus) + * { font-size: 150%; opacity: .5; @content; }}/* Default styling * https://github.com/tonystar/float-label-css/blob/master/scss/float-label.scss */.has-float-label { @include float-label-container; @include float-label; select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input, select { @include float-label-input; font-size: inherit; padding-top: 1em; margin-bottom: 2px; border: 0; border-radius: 0; border-bottom: 2px solid rgba(0,0,0,.1); @include float-label-scaled { top: .25em; } &:focus { outline: none; border-color: rgba(0,0,0,.5); } } select { padding-right: 1em; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .5em bottom .25em; background-size: 8px 10px; }}// Custom styling* { box-sizing: border-box;}body { position: relative; max-width: 20rem; background: #eee; margin: 2rem auto;}fieldset { padding: 1.5rem; background: white;}input, select { width: 100%; margin-bottom: .5rem;}button { background: #333; color: white; border: 0; padding: .5em 1em; margin-top: 1rem;}.input-group { display: table; width: 100%;}.input-group > * { display: table-cell; width: 50%;}/* Powered by: https://github.com/tonystar/float-label-css *//* Re-usable mixins * https://github.com/tonystar/float-label-css/blob/master/scss/_mixins.scss *//* Default styling * https://github.com/tonystar/float-label-css/blob/master/scss/float-label.scss */.has-float-label { display: block; position: relative;}.has-float-label label, .has-float-label > span { position: absolute; left: 0; top: 0; cursor: text; font-size: 75%; opacity: 1; transition: all 0.2s;}.has-float-label select { -webkit-appearance: none; -moz-appearance: none; appearance: none;}.has-float-label input, .has-float-label select { font-size: inherit; padding-top: 1em; margin-bottom: 2px; border: 0; border-radius: 0; border-bottom: 2px solid rgba(0, 0, 0, 0.1);}.has-float-label input::-moz-placeholder, .has-float-label select::-moz-placeholder { opacity: 1; -moz-transition: all 0.2s; transition: all 0.2s;}.has-float-label input:-ms-input-placeholder, .has-float-label select:-ms-input-placeholder { opacity: 1; -ms-transition: all 0.2s; transition: all 0.2s;}.has-float-label input::placeholder, .has-float-label select::placeholder { opacity: 1; transition: all 0.2s;}.has-float-label input:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-moz-placeholder { opacity: 0;}.has-float-label input:placeholder-shown:not(:focus):-ms-input-placeholder, .has-float-label select:placeholder-shown:not(:focus):-ms-input-placeholder { opacity: 0;}.has-float-label input:-moz-placeholder-shown:not(:focus)::placeholder, .has-float-label select:-moz-placeholder-shown:not(:focus)::placeholder { opacity: 0;}.has-float-label input:-ms-input-placeholder:not(:focus)::placeholder, .has-float-label select:-ms-input-placeholder:not(:focus)::placeholder { opacity: 0;}.has-float-label input:placeholder-shown:not(:focus)::placeholder, .has-float-label select:placeholder-shown:not(:focus)::placeholder { opacity: 0;}.has-float-label input:-moz-placeholder-shown:not(:focus) + *, .has-float-label select:-moz-placeholder-shown:not(:focus) + * { font-size: 150%; opacity: 0.5; top: 0.25em;}.has-float-label input:-ms-input-placeholder:not(:focus) + *, .has-float-label select:-ms-input-placeholder:not(:focus) + * { font-size: 150%; opacity: 0.5; top: 0.25em;}.has-float-label input:placeholder-shown:not(:focus) + *, .has-float-label select:placeholder-shown:not(:focus) + * { font-size: 150%; opacity: 0.5; top: 0.25em;}.has-float-label input:focus, .has-float-label select:focus { outline: none; border-color: rgba(0, 0, 0, 0.5);}.has-float-label select { padding-right: 1em; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.5em bottom 0.25em; background-size: 8px 10px;}* { box-sizing: border-box;}body { position: relative; max-width: 20rem; background: #eee; margin: 2rem auto;}fieldset { padding: 1.5rem; background: white;}input, select { width: 100%; margin-bottom: 0.5rem;}button { background: #333; color: white; border: 0; padding: 0.5em 1em; margin-top: 1rem;}.input-group { display: table; width: 100%;}.input-group > * { display: table-cell; width: 50%;}{{}} {{}}
Source: github://tonystar/float-label-css
Comments & Discussion
Share your thoughts, ask questions and feedback