CODEWITHSUNDEEP
csstwitter-bootstrap-3
JohnP
JohnP

Reputation: 1076

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

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.

Upvotes: 28

Views: 92122

Answers (5)

Eugene
Eugene

Reputation: 297

Bootstrap 5 has form-control-plaintext class for that:

<input type="text" readonly class="form-control-plaintext" id="email"/>

Upvotes: 1

Wim Deblauwe
Wim Deblauwe

Reputation: 26878

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>

Upvotes: 14

VeganHunter
VeganHunter

Reputation: 5994

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.

Upvotes: 4

Tanbi
Tanbi

Reputation: 597

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

Upvotes: 40

Luca Nicoletti
Luca Nicoletti

Reputation: 102

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

That should work

Upvotes: 3

Related Questions