如何将样式应用于应用了 Angular 条件的 [readonly] 输入元素？答案

【问题标题】：How to apply styles to a [readonly] input element with Angular conditions applied?如何将样式应用于应用了 Angular 条件的 [readonly] 输入元素？
【发布时间】：2019-08-05 13:04:03
【问题描述】：

我正在尝试使用颜色设置只读<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;
}

【问题讨论】：

标签： css angular readonly

【解决方案1】：

这种组合有效

.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"  >

感谢您的意见

【讨论】：

【解决方案2】：

是的引导程序。

（使用家庭帐户）

【讨论】：

【解决方案3】：

您在这里所做的一切只需要按照解决问题的方式编写样式即可。

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

希望这会有所帮助！

【讨论】：

我会试试的。一会儿回来
它没有用。这可能是因为表单控件样式
是的，这可能是个问题。您可以在全局 style.css 中添加此样式来解决问题
您是否使用任何 CSS 框架进行样式设置？像引导程序或类似的东西！
是的，我正在使用引导程序。