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
    }

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

Answer 2

这是我的最终解决方案，似乎效果很好。我保持原样。

再次感谢您的帮助：

ISO-8859-1

CSS禁用了表格的列背景色和表格中所选行的输入

2 个答案: