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

Posted 2023-03-05

【中文标题】如何切换输入的样式以使其看起来像标签

【英文标题】：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>

<input type="text" class="asd" value="Label look like" disabled/>

【讨论】：

+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 类作为标签和普通输入字段。然后切换可见性以进行编辑。