CSS отключил ввод в фоновом режиме столбца таблицы и выделенную строку в таблице

Question

Я бы сказал заранее, что CSS - мое самое слабое место.У меня есть таблица angularJs, созданная с помощью следующего оператора ng-repeat:

 <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

Это мое окончательное решение, которое, кажется, работает хорошо. Я сохраняю это как есть.

Еще раз спасибо за вашу помощь:

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

Answer 2

Причина, по которой вы видите зеленый цвет при выборе строки, заключается в том, что у вас задан фон для непрозрачности 40% (альфа), а синий фон пропускает кровь:

    .smYellow {
      background-color: rgba(250,243,126, 0.40);  // R,G,B,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.