CSS 如何使 Bootstrap 只读输入字段看起来像普通文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36574484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap readonly input field look like normal text?
提问by JohnP
I have a field in my html page like this:
我的 html 页面中有一个字段，如下所示：
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p>tags. Please help me CSS wizards.
我希望它看起来像<p>标签之间的普通文本。请帮助我 CSS 向导。
回答by Tanbi
you can try this
你可以试试这个
CSS
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
如果你想和一个班级一起使用，你可以试试这个
HTML
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input>look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/and please dont forget calling jquery js library
如果你想让它<input>看起来像内联文本（调整输入元素的大小），请检查这个小提琴 https://jsfiddle.net/Tanbi/xyL6fphm/并且请不要忘记调用 jquery js 库
回答by Wim Deblauwe
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
我意识到问题是关于 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 protected]">
</div>
回答by VeganHunter
in addition to the accepted answer, I found that the following style works a bit better:
除了接受的答案之外，我发现以下样式效果更好：
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
Bootstrap 引入了一个人们可能想要隐藏的阴影。
回答by Luca Nicoletti
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
那应该工作
