HTML CSS examples for CSS Widget:Border Style
Add a padding before and after a label that overlaps the top border of an input field
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .floating-label { padding: 20px; position: relative; } .bg-white {<!-- w ww. jav a 2 s. com--> background: #fff; } .bg-gray { background: #eee; } input { padding: 5px 10px; font-size: 14px; } label { font-size: 11px; position: relative; top: -16px; left: 46px; padding: 0 5px; z-index: 1; } label:before { z-index: -1; content: ''; display: block; width: 100%; height: 50%; background-color: #fff; position: absolute; top: 50%; margin-top: -1px; } </style> </head> <body> On white, bueno: <div class="floating-label bg-white"> <label>Label</label> <input type="text" value="Something"> </div> On non-white, no bueno: <div class="floating-label bg-gray"> <label>Label</label> <input type="text" value="Something"> </div> </body> </html>