form-select-plaintext

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I’d like to style a select element (or any element, really) such that it has the same padding, margins, flow, etc, but appears as plaintext (meaning no border, no dropdown chevron, etc). Effectively like form-control-plaintext, but for selects.

Motivation and context

I have some text in a table, and when its not editable, I want it to look like plain text. When the user clicks the edit button, I want the select dropdown to appear “around” the existing text, without shifting anything else on the page.

I’ve tried doing this with some complex calc()s for padding, but I can’t seem to get it just right…

[WinterSilence]

See #35688

When the user clicks the edit button, I want the select dropdown to appear “around” the existing text, without shifting anything else on the page.

You can use Datatables: inline editing or something like this. If you want simple solution, then set transparent border/background for “readonly” fields:

.inline-editable {
  .form-control,
  .form-select {
      &[readonly] {
         border-color: transparent;
      }
  }
  .form-select[readonly] {
      background-color: transparent;
      background-image: none;
  }
}

or you can customize .form-control-plaintext like as #35809 and prepend class to fields: <input class="form-control-plaintext form-control" ...>

[gianlucagiacometti]

You can try my select extension for Bootstrap (https://github.com/gianlucagiacometti/bootstrap-select) with the form-select-plaintext class