Krever Krever - 11 months ago 79
CSS Question

Static label inside input

There is a lot of similar question but I couldn't adjust it to my case.

Here are my goals:

  • borderless input list

  • static(not disappearing) label on the left side of every input, vertically centered

  • value of the input on the right

  • applying some effect on focus(border, shadow, etc)

  • pure css(I can probably achieve all of these using javascript, but it feels dirty)

I have achieved acceptable effect placing input next to the span, but I can't apply any focus effect on whole row in such way.

Here is an example without focus effect:

enter image description here


Here is my code for presented output, but as mentioned, it cannot handle focus properly.

Here is my code for
solution. The problem is that when focused, label is not affected by effect(and looks like crap).

Answer Source

Flexbox can do that:

div {
  width: 80%;
  margin: 1em auto;
  border-bottom: 1px solid grey;
  padding-bottom: .25em;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
input {
  border: none;
label {
  flex: 1;
input:focus + label {
  background: pink;
  outline: none;
  <input type="text" />
  <label for="">Long Label Goes Here</label>
  <input type="text" />
  <label for="">Short Label</label>