Как заставить загрузочное поле ввода Bootstrap выглядеть как обычный текст?

У меня есть поле на моей странице html, например:

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

Я хотел бы, чтобы он выглядел как обычный текст между тегами <p>. Помогите мне CSS мастеров.

Ответы

Ответ 1

вы можете попробовать это

CSS

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

если вы хотите использовать с классом, вы можете попробовать этот

HTML

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

CSS

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

если вы хотите, чтобы <input> выглядел как встроенный текст (изменение размера элемента ввода), пожалуйста, проверьте этот скрипт https://jsfiddle.net/Tanbi/xyL6fphm/ и, пожалуйста, Не забывайте вызывать jquery js library

Ответ 2

в дополнение к принятому ответу, я обнаружил, что следующий стиль работает немного лучше:

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

    box-shadow: none;
}

Bootstrap вводит тень, которую можно скрыть.

Ответ 3

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

Это должно работать

Ответ 4

Я понимаю, что вопрос касается 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>