输入

Question

有很多类似的问题，但我无法根据我的情况进行调整。

以下是我的目标：

• 无边界输入列表
• 每个输入左侧的静态（不消失）标签，垂直居中
• 右侧输入值
• 对焦点（边框，阴影等）应用一些效果
• 纯css（我可以用javascript实现所有这些，但感觉很脏）

我已经达到了可以接受的效果，将输入放在跨度旁边，但我不能以这种方式对整行应用任何焦点效果。

以下是没有焦点效果的示例：

@Edit：

这是我的输出代码，但如上所述，它无法正确处理焦点。 http://jsfiddle.net/f2znvn4f/

以下是relative/absolute解决方案的代码。问题是，当聚焦时，标签不受效果的影响（看起来像垃圾）。 http://jsfiddle.net/kv2uyjbt/1/

Answer 1

使输入无边框并正确调整其中的文本。然后将标签绝对定位在（0,0）并将其包装在带position: relative的div中。然后，您只需调整<label>和<input>的填充，以使文本在垂直位置匹配。

如果您遇到困难，请发布当前代码，我们应该可以解决这个问题。

Answer 2

Flexbox可以做到这一点：

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>