CODEWITHSUNDEEP
cssangularreadonly
Mikael
Mikael

Reputation: 25

How to apply styles to a [readonly] input element with Angular conditions applied?

I am trying to style a readonly <input> element with a color. I have looked into the different code and only found the explanation for 

<input readonly>

or 

<input readonly="true">

but with 

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

I can't find a solution. I have tried with the following CSS but it did not work.

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

Upvotes: 2

Views: 5367

Answers (3)

Mikael
Mikael

Reputation: 25

This combination worked

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

together with this

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

Thanks for inputs

Upvotes: 0

bajen micke
bajen micke

Reputation: 319

Yes bootstrap.

(Using homeaccount)

Upvotes: -1

TheParam
TheParam

Reputation: 10541

Everything you did right here only you need to write style in following the way to solve your problem.

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;
}

Demo on stackblitz

Hope this will help!

Upvotes: 3

Related Questions