How to Make Bootstrap Readonly Input Field Look Like Normal Text

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

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

Force enabled look to readonly input with bootstrap CSS

Assuming your custom css is included after the boostrap.css, place the following code in your custom css file

input[readonly] {
    background-color: #fff;
    /* any other styles */
}

If you only want to apply this style to specific read only inputs, add a class "exampleclass" to those inputs, and then use:

input[readonly].exampleclass {
   background-color: #fff;
}

Transforming a form to a read-only layout

If you want to have elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

for Example:

<form>
  <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@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

Refer to this: https://getbootstrap.com/docs/4.4/components/forms/#readonly-plain-text

Bootstrap 4 - Readonly Plain Text - Select Dropdown

To achieve expected result, use below option of on change event and displaying selected option in p tag and hiding select

$('select').on('change', function(){  $(this).css('display','none');  $('.plainText').text($(this).val());});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select required class="custom-select custom-select-lg" id="ingredientUnits">  <option selected disabled>Select Units</option>  <option>millilitres</option>  <option>kilograms</option></select><p class="plainText"></p>

Make input field readonly without changing background colour in CSS or JavaScript

Yes, you can use the :disabled pseudo class, e.g.

input.myClass:disabled {
    /* style declaration here */
}

HTML add bootstrap check inside input readonly

You can use .input-group and adjust styling of .input-group-text for your needs.

Below, I have added .border-end-0, .bg-transparent, and .pe-0 to the .input-group-text and .border-start-0 to the input.form-control.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<div class="card">
  <div class="card-body">
    <form>
      <div class="row mb-3">
        <div class="col">
          <label for="kyc_status" class="form-label">
            KYC Status
          </label>
          <div class="input-group">
            <span class="input-group-text border-end-0 bg-transparent pe-0"><i class="bi bi-check"></i></span>
            <input readonly type="text" id="kyc_status" class="form-control border-start-0" value="Success">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

How do I make a text input non-editable?

<input type="text" value="3" class="field left" readonly>

No styling necessary.

See <input> on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

How to line up labels and read-only fields in a Bootstrap 2 form

You can use the uneditable input

<span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span>

EDIT:

As of bootstrap 3.0 a class has been added to handle this

When you need to place regular, static text next to a form label
within a horizontal form, use the .form-control-static class on a <p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>

---

Related Topics