Wie kann ich eine Auffüllung vor und nach einer Beschriftung hinzufügen, die den oberen Rand eines Eingabefelds überlappt?

Question

Ich versuche, Eingabefelder zu erstellen, die

wie diese aussehen, die einfach genug ist, weil ich einen weißen Hintergrund auf dem Etikett mit einer gewissen Polsterung hinzufügen. Das Problem ist, wenn das Feld wie diese auf einem nicht-weißen Hintergrund erscheint

Gibt es eine Möglichkeit, dies auf dem Etikett mit einem transparenten Hintergrund zu erreichen?

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> 

Answer 1

Vielleicht so etwas wie dies ?:

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 verwendet: vor Selektor eine weiße 50% Höhe von Label-Elemente zu schaffen, die Grenze zu verstecken

Answer 2

body{ 
 
    background-color:#ececec; 
 
} 
 

 
fieldset{ 
 
    padding: 0; 
 
    width: 0; 
 
    background-color: #FFF; 
 
    border: 1px solid gray; 
 
} 
 

 
fieldset input{ 
 
    border:none; 
 
    margin-top:-10px; 
 
    height:25px; 
 
    background-color:transparent; 
 
}

<fieldset> 
 
    <legend>Lorem Ipsum:</legend> 
 
    <input type="text"> 
 
</fieldset>