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

我的html页面中有如下字段：

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

我希望它看起来像

标记之间的普通文本。请帮助我CSS向导

你可以试试这个

CSS

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

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

如果你想和一个类一起使用，你可以试试这个

HTML

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

如果您想使

看起来像内联文本（调整输入元素的大小），请检查此提琴，并且请不要忘记调用jquery js库

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

---

这应该行得通

除了公认的答案之外，我发现以下风格更有效：

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

    box-shadow: none;
}

---

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

我意识到问题是关于Bootstrap 3的，但最好知道Bootstrap 4现在有一个现成的功能：

电子邮件

---

你试过什么？请在您的帖子中显示您的作品/代码。您需要覆盖

.form control

应用于

的所有样式。删除

.form控件

并使用自己的类设置

样式可能更容易。有什么原因不能只使用

标记吗？如果没有，请尝试添加css

border:none；背景色：透明

看起来像内联文本。我还添加了左填充：0；我还添加了左填充：0；同时添加

大纲：0

<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>