html - How can I add a padding before and after a label that overlaps the top border of an input field? -

i trying create input fields

which easy enough because can add white background label padding. problem when field appears on non-white background this

is there way accomplish transparent background on label?

https://jsfiddle.net/jgu61qaq/

<div class="floating-label bg-white">   <label>label</label>   <input type="text" value="something"> </div>  <div class="floating-label bg-gray">   <label>label</label>   <input type="text" value="something"> </div>  <style> .floating-label {   padding: 20px;   position: relative;   font-family: arial, sans-serif; }  .bg-white {   background: #fff; }  .bg-gray {   background: #eee; }  input {   padding: 5px 10px;   font-size: 14px; }  label {   font-size: 11px;   position: absolute;   top: 15px;   left: 25px;   background: #fff;   padding: 0 5px; } </style> 

maybe this?:

label {   position: relative;   top: -16px;   left: 46px;   z-index: 0; } label:before {   z-index: -1;   content: '';   display: block;   width: 100%;   height: 50%;   background-color: #fff;   position: absolute;   top: 50%;   margin-top: -1px; } 

https://jsfiddle.net/jgu61qaq/3/

i used :before selector create white 50% height of label element hide border