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技巧或一些聰明的解決方案來解決此問題，所以當行突出顯示或不突出顯示時，我的顏色看起來是相同的（或者至少比綠色更黃）。

我將不勝感激。

UPDATE。 嘗試了建議的想法，但仍然看到綠色-我在做什么錯？

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

由於藍色+黃色=綠色，因此您將看到綠色。 將opacity（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語句。

Answer 2

這是我的最終解決方案，似乎效果很好。 我保持原樣。

再次感謝你的幫助：

 .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, 0.60) !important; } .table-list > tbody > tr.selected td > input.smOrange { background-color: rgba(245, 128, 37, 0.60) !important; }