输入内部的静态标签

-2

有很多类似的问题，但我无法调整到我的情况。输入内部的静态标签

这里是我的目标：

无国界的输入列表
静态的（未消失）的标签，垂直居中，右侧
输入
值对焦点（边框，阴影等）施加一些效果
纯CSS（我大概可以用javascript实现所有这些，但感觉很脏）

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

这里是没有焦点的效果的例子：

@Edit：

这里是我提出的输出代码，但如前所述，它不能处理正确聚焦。 http://jsfiddle.net/f2znvn4f/

这是我的代码relative/absolute的解决方案。问题在于，当关注时，标签不会受到影响（看起来像废话）。 http://jsfiddle.net/kv2uyjbt/1/

来源

2016-08-31 Krever

显示你的一些标记 –

不能集中正常的股利。不可调焦。您请求的大多数任务都非常简单，您可以使用单行CSS完美实现。如果你不想看到这个问题关闭为offtopic，那么你不会分享你想要的这么长时间，这是一条关于stackoverflow的规则。分享您的CSS和HTML，我们将对其进行编辑以解决您的问题。解释更好的结果。 –

做一个DIV – SandroMarques

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>

来源

2016-08-31 10:05:46

使输入无边框，并对其中的文本进行右对齐。然后将标签绝对定位在（0，0）处，并用position: relative将其包装在一个div中。那么您只需要调整<label>和<input>的填充以使文字在垂直位置相匹配。

如果您遇到困难，请发布您的当前代码，我们应该能够解决该问题。

来源

2016-08-31 08:14:21 howard9714

我已添加代码:) – Krever

输入内部的静态标签

回答

相关问题