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

除了接受的答案外，我发现以下风格效果更好：

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

    box-shadow: none;
}

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

Answer 3

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

那应该有用

Answer 4

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

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

4 个答案: