如何使 Bootstrap 只读输入字段看起来像普通文本？答案

【问题标题】：How to make Bootstrap readonly input field look like normal text?如何使 Bootstrap 只读输入字段看起来像普通文本？
【发布时间】：2016-08-03 03:17:56
【问题描述】：

我的 html 页面中有一个字段，如下所示：

<input type="text" class="form-control" readonly>

我希望它看起来像 <p> 标签之间的普通文本。请帮助我的 CSS 向导。

【问题讨论】：

你试过什么？请在您的帖子中显示您的工作/代码。您需要覆盖.form-control 应用于<input> 的所有样式。删除.form-control 并使用您自己的类设置<input> 的样式可能更容易。
有什么理由不能只使用<p> 标签？如果不尝试将 css border: none; background-color: transparent; 添加到它

标签： css twitter-bootstrap-3

【解决方案1】：

我知道问题是关于 Bootstrap 3，但很高兴知道 Bootstrap 4 现在已经开箱即用：https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text

<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>

【讨论】：

【解决方案2】：

除了接受的答案之外，我发现以下样式效果更好：

input[readonly] {
    background-color: transparent;
    border: 0;

    box-shadow: none;
}

Bootstrap 引入了人们可能想要隐藏的阴影。

【讨论】：

我还添加了 padding-left: 0;
另加outline: 0

【解决方案3】：

你可以试试这个

CSS

input[readonly]{
  background-color:transparent;
  border: 0;
  font-size: 1em;
}

如果你想在课堂上使用，你可以试试这个

HTML

<input type="text" class="form-control classname" value="Demo" readonly />

CSS

input[readonly].classname{
  background-color:transparent;
  border: 0;
  font-size: 1em;
}

如果你想让<input> 看起来像内联文本（调整输入元素的大小），请检查这个小提琴https://jsfiddle.net/Tanbi/xyL6fphm/，请不要忘记调用 jquery js 库

【讨论】：

你需要一些javascript来做这个。你可以在这个小提琴中找到一个示例：https://jsfiddle.net/Tanbi/xyL6fphm/ PS: 我在这个小提琴中使用了 jquery1.12.2
您可能应该将其添加到您的答案中，因为 OP 似乎想让 <input> 看起来像内联文本。
我还添加了 padding-left: 0;

【解决方案4】：

<input type="text" placeholder="Show your text" readonly style="border: 0px;" />

应该可以的

【讨论】：