Pure-CSS Float Label. Finally.

Developer
Anton Staroverov
Size
3,831 Kb
Views
22,264
  1. Pure-CSS Float Label. Finally. Previews
  2. Pure-CSS Float Label. Finally. HTML Codes
  3. Pure-CSS Float Label. Finally. CSS Codes
  4. Pure-CSS Float Label. Finally. JS Codes

How do I make an pure-css float label. finally.?

Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.. What is a pure-css float label. finally.? How do you make a pure-css float label. finally.? This script and codes were developed by Anton Staroverov on 18 November 2022, Friday.

Pure-CSS Float Label. Finally. Previews
IQ Test

Pure-CSS Float Label. Finally. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure-CSS Float Label. Finally.</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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>
<!---->
<a href="https://github.com/tonystar/float-label-css" target="_blank"> <img src="https://img.shields.io/github/stars/tonystar/float-label-css.svg?style=social&label=Star"/>
</a> <script src="js/index.js"></script>
</body>
</html>

Pure-CSS Float Label. Finally. - Script Codes CSS Codes

/* 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; -webkit-transition: all .2s; transition: all .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::-webkit-input-placeholder, .has-float-label select::-webkit-input-placeholder { opacity: 1; -webkit-transition: all .2s; transition: all .2s;
}
.has-float-label input::-moz-placeholder, .has-float-label select::-moz-placeholder { opacity: 1; -webkit-transition: all .2s; transition: all .2s;
}
.has-float-label input:-ms-input-placeholder, .has-float-label select:-ms-input-placeholder { opacity: 1; -webkit-transition: all .2s; transition: all .2s;
}
.has-float-label input::placeholder, .has-float-label select::placeholder { opacity: 1; -webkit-transition: all .2s; transition: all .2s;
}
.has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder { opacity: 0;
}
.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:placeholder-shown:not(:focus)::placeholder, .has-float-label select:placeholder-shown:not(:focus)::placeholder { opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus) + *, .has-float-label select:placeholder-shown:not(:focus) + * { font-size: 150%; opacity: .5; top: .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: .5rem;
}
button { background: #333; color: white; border: 0; padding: .5em 1em; margin-top: 1rem;
}
a { display: block; padding: 10px; position: absolute; z-index: -1; top: 1rem; left: 100%; margin-left: -65px; -webkit-transition: all .2s; transition: all .2s;
}
a:hover { margin-left: 0;
}
.input-group { display: table; width: 100%;
}
.input-group > * { display: table-cell; width: 50%;
}

Pure-CSS Float Label. Finally. - Script Codes JS Codes

// No JS!
Pure-CSS Float Label. Finally. - Script Codes
Pure-CSS Float Label. Finally. - Script Codes
Home Page Home
Developer Anton Staroverov
Username tonystar
Uploaded November 18, 2022
Rating 4
Size 3,831 Kb
Views 22,264
Do you need developer help for Pure-CSS Float Label. Finally.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Staroverov (tonystar) Script Codes
Name
Container and clip path
Bootstrap 4 Floating Labels
Bootstrap Hover Tabs
Bootstrap 3 Float Label
Loader
Pure-CSS 3D Spinning Text
Bootstrap 4 Float Label
Flag
Bootstrap Template
Col togglers
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!