Как применить стили к элементу ввода [только для чтения] с применением угловых условий?

Question

Я пытаюсь присвоить элементу <input> только для чтения цвет . Я изучил другой код и нашел только объяснение для

<input readonly>

или

<input readonly="true">

но с

<input [readonly]="(!groupForm.errors?.validateCode) ? true : null  &&
    (groupForm.dirty || groupForm.touched)"  type="text" id="specNr"
    class="form-control"  formControlName="specNr" >

Я не могу найти решение. Я попытался с помощью следующего CSS, но это не сработало.

input[readonly]{
  background-color: #f17517;
}

Answer 1

Все, что вы сделали здесь, только вам нужно написать стиль, следуя пути решения вашей проблемы.

app.component.html

<h1>Input Demo</h1>

<h3>Read Only Input Styling</h3>
<input [readonly]="true">

<h3>Read Only Input Styling</h3>
<input [readonly]="false">

app.component.css

input:-moz-read-only { /* For Firefox */
   background-color: #f17517;
}

input:read-only { 
   background-color: #f17517;
}

Демонстрация на стеке

Надеюсь, это поможет!

Answer 2

Эта комбинация работала

.form-control[readonly] {
  background-color: #fcfcfc !important;
}

вместе с этим

<input readonly="{{(!groupForm.errors?.validateFc) ? true : null  && (groupForm.dirty || groupForm.touched)}}"  type="text" id="fc"  class="form-control"  formControlName="fcn"  >

Спасибо за ввод

Answer 3

Да, бутстрап.

(с помощью homeaccount)