How to make Bootstrap readonly input field look like normal text?

Question

I have a field in my html page like this:

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

I would like it to look like normal text between <p> tags. Please help me CSS wizards.

Solution 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

Solution 2

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

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

Solution 3

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.

Solution 4

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

That should work

View more solutions

Comments

[hungerstar]

You should probably add that to your answer as it appears the OP wants to make the <input> look like inline text.

[DestiX]

I also added padding-left: 0;

[DestiX]

I also added padding-left: 0;

[mangatinanda]

also add outline: 0