javascript - CSS 在表格的列背景颜色和表格中的选定行中禁用输入

Question

我会提前说 CSS 是我最薄弱的地方。我有一个使用以下 ng-repeat 语句创建的 angularJs 表:

 <table id="lineItemsTable"
                           class="table table-bordered table-hover table-list scroll">
                        <thead>
                            <tr>
                                <th>@Labels.itemId</th>
                                <th>@Labels.nickname</th>
                                <th>@Labels.description</th>
                                <th class="text-right">@Labels.quantity</th>
                                <th ng-if="crud.model.adjType>=0">@Labels.location</th>
                                <th ng-if="crud.model.adjType<0">@Labels.cost</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat-start="result in crud.model.lineItems track by $index"
                                ng-form="lineItemForm"
                                ng-click="crud.selectedMatrixIndex=-1;crud.selectedIndex=$index;"
                                ng-class="{selected: $index === crud.selectedIndex}">

因此，我的网格(表格)中的选定行使用此 css 类以蓝色突出显示:

    .table-list > tbody > tr.selected td {
        background: rgba(204, 229, 255, 1);
    }

此外，在同一张表中，我使用以下 HTML 创建了禁用成本:

<td>                                
                                    <input type="number" name="cost" 
                                           ng-if="crud.model.adjType<0"
                                           ng-model="result.unitCost"
                                           data-sm:number-format
                                           data-accuracy="2"
                                           data-sm:number
                                           ng-disabled="true"
                                           ng-class="{'smYellow' : (result.unitCost>0 && result.costOverride === true), 'smOrange': result.unitCost===0 }"
                                           class="form-control form-control-sm text-right">
                                </td>

其中 smYellow 类如下:

.smYellow {
    fill: #faf37e;
    fill-opacity: 0.4;
    stroke: #faf37e;
    stroke-width: 3;
    background-color: rgba(250,243,126, 0.40) !important;
}

我遇到的问题是当该行未突出显示时，我的黄色看起来不错。但是，当突出显示该行时，我看到了绿色(蓝色 + 黄色)。我想知道是否有针对此问题的 CSS 技巧或一些聪明的解决方案，以便在突出显示或不突出显示该行时我的颜色看起来相同(或者至少，黄色多于绿色)。

我会很感激任何想法。

更新。尝试了建议的想法，但仍然看到绿色 - 我做错了什么？

.smOrange {
    fill: #F58025;
    fill-opacity: 0.4;
    stroke: #F58025;
    stroke-width: 3;
    background-color: rgba(245, 128, 37, 0.40) !important;
}

.smYellow {
    fill: #faf37e;
    fill-opacity: 0.4;
    stroke: #faf37e;
    stroke-width: 3;
    background-color: rgba(250,243,126, 0.40) !important;
}

.table-list > tbody > tr.selected td > input.smYellow {
    background-color: rgba(250,243,126, 1);
    fill-opacity: 1;
}
.table-list > tbody > tr.selected td > input.smOrange {
    background-color: rgba(245, 128, 37, 1);
    fill-opacity: 1;
}

Answer 1

选择该行时看到绿色的原因是因为您将输入的背景设置为 40% 不透明度 (alpha)，而蓝色背景正在渗透:

    .smYellow {
      background-color: rgba(250,243,126, 0.40);  // R,G,B,alpha
    }

因为蓝色 + 黄色 = 绿色，所以绿色就是你所看到的。将不透明度 (alpha) 设置为 100%，无论选择什么，您都应该看到纯黄色的输入:

    .smYellow {
      background-color: rgba(250,243,126, 1);    // R,G,B,alpha
    }

或者，您可以制定另一个更具体的规则，让您在选择该行时设置不同的颜色:

    .table-list > tbody > tr.selected td > input.smYellow{
      background-color: rgba(250,243,126, 0.4); // put your new matching color here
    }

这将要求您从 smYellow 规则中删除 !important 语句。