如何切换输入的样式以使其看起来像标签答案

【问题标题】：How can i toggle an input's style to look like a label如何切换输入的样式以使其看起来像标签
【发布时间】：2013-08-19 15:07:09
【问题描述】：

我有一些输入字段，我想将它们设置为最初看起来像标签的样式，然后通过 angular.js 为它们应用样式，以便在按下按钮后可以对其进行编辑。我正在使用引导程序，是否有一个内置类可以打开和关闭这些输入？

【问题讨论】：

【解决方案1】：

<style type="text/css">.asd {
  background: rgba(0, 0, 0, 0);
  border: none;
}

</style>

&lt;input type="text" class="asd" value="Label look like" disabled/&gt;

【讨论】：

+1，我推荐border: 1px solid rgba(0,0,0,0)而不是none，所以当OP在标签样式和输入样式之间切换时，文本的位置不会因为边框的变化而改变.
您应该使用transparent（border 和background-color）而不是rgba(0,0,0,0)。它的渲染成本略低（这并不重要，它更不符合原则）。此外，它应该是background-color: transparent，而不是background。 background 不仅覆盖了 background-color，而且如果任何其他 props 设置了不太具体的选择器，其他 CSS 声明将被覆盖（丢失）。

【解决方案2】：

不像切换类那么简单，但您可以使用 <p> 和 .form-control-static 类作为标签和普通输入字段。然后切换可见性以进行编辑。

【讨论】：