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

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.

我希望它看起来像

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

3 个解决方案

#1

you can try this

你可以试试这个

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

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

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

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

#2

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引入了一个人们可能想要隐藏的阴影。

#3

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

That should work

这应该工作