¿Cómo hacer que el campo de entrada de solo lectura de Bootstrap se vea como texto normal?

Solución:

puedes probar esto

CSS

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

si quieres usar con una clase, puedes probar esta

HTML

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

CSS

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

si quieres hacer el <input> parece texto en línea (cambiando el tamaño del elemento de entrada), verifique este violín https://jsfiddle.net/Tanbi/xyL6fphm/ y no olvide llamar a la biblioteca jquery js

Me doy cuenta de que la pregunta es sobre Bootstrap 3, pero sería bueno saber que Bootstrap 4 ahora tiene esto listo para usar: 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>

Además de la respuesta aceptada, descubrí que el siguiente estilo funciona un poco mejor:

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

    box-shadow: none;
}

Bootstrap introduce una sombra que es posible que desee ocultar.

---

---

Utiliza Nuestro Buscador