Statisches Etikett innerhalb des Eingangs

Question

Es gibt viele ähnliche Fragen, aber ich konnte es nicht auf meinen Fall einstellen.

Hier sind meine Ziele:

• randlos Eingabeliste
• statische (nicht verschwinden) Etikett auf der linken Seite jeder Eingabe, vertikal
• Wert des Eingangs auf der rechten Seite
• zentriert einen Effekt auf den Fokus (Rand, Schatten, usw.) anwenden
• pure css (Ich kann wahrscheinlich alle diese mit Javascript erreichen, aber es fühlt sich schmutzig an)

Ich habe einen akzeptablen Effekt erzielt, indem ich die Eingabe neben der Spanne platziere, aber ich kann auf diese Weise keinen Fokuseffekt auf die ganze Reihe anwenden. Hier

ist ein Beispiel ohne Fokus-Effekt:

@Edit:

Hier ist mein Code für präsentiert Ausgang, aber wie bereits erwähnt, kann es nicht umgehen richtig scharf. http://jsfiddle.net/f2znvn4f/

Hier ist mein Code für relative/absolute Lösung. Das Problem ist, dass das Label beim Fokussieren nicht vom Effekt beeinflusst wird (und wie Mist aussieht). http://jsfiddle.net/kv2uyjbt/1/

Answer 1

Flexbox kann das tun:

div { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
    border-bottom: 1px solid grey; 
 
    padding-bottom: .25em; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
    align-items:center; 
 
} 
 
input { 
 
    border: none; 
 
    text-align:right; 
 
} 
 
label { 
 
    flex: 1; 
 
} 
 
input:focus, 
 
input:focus + label { 
 
    background: pink; 
 
    outline: none; 
 
}

<div> 
 
    <input type="text" /> 
 
    <label for="">Long Label Goes Here</label> 
 
</div> 
 
<div> 
 
    <input type="text" /> 
 
    <label for="">Short Label</label> 
 
</div>

Answer 2

Die Eingabe border-less und den Text darin rechtsbündig einstellen. Stellen Sie dann das Label absolut auf (0, 0) und wickeln Sie beide in ein div mit position: relative. Dann sollten Sie nur die Abstände <label> und <input> anpassen, damit die Texte in vertikaler Position übereinstimmen.

Wenn Sie Schwierigkeiten damit haben, dann veröffentlichen Sie Ihren aktuellen Code, wir sollten in der Lage sein, das zu beheben.