Krever Krever - 3 months ago 18
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

@Edit:

Here is my code for presented output, but as mentioned, it cannot handle focus properly. http://jsfiddle.net/f2znvn4f/

Here is my code for
relative/absolute
solution. The problem is that when focused, label is not affected by effect(and looks like crap). http://jsfiddle.net/kv2uyjbt/1/

Answer

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;
  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>