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

Question

我的html页面中有一个字段,如下所示:

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

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

Answer 1

你可以试试这个

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库

Answer 2

我意识到问题是关于 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>