How to make buttons have the color defined in css when selecting Row in a datatable

Question

When I select Row from my datatable, the delete button turns white and does not obey the green color I entered in css. When I place the mouse over and the button, the focus disappears and the green color appears. It seems that it is something related to the focus color...

HTML/Button:

<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a data-id="' + full.id + '" class="btn btn-sm btn-icon btn-default btn-outline btn-excluir-financeiro" title="Excluir"><i class="icon wb-trash" aria-hidden="true"></i></a></div>

CSS:

table.dataTable tbody tr.selected {    
    color: darkgreen !important;
    background-color: #f5f5f5 !important;
}

It’s getting that way:

I’d like it to stay that way:

Does anyone know how to solve this problem? Thank you ;)

Answer 1

If it was a fontawesome icon it would just change the color attribute:

table.dataTable tbody tr.selected i{
   color: darkgreen;
}

but have to see how this icone, if it is set as background then you’ll have to create another icon with the color darkgreen and replace this background with this new icon with the color changed when it is selected.

If it were a svg it could be exchanged for the attribute fill: darkgreen;

In your case by the way ->

table.dataTable tbody tr.selected .wb-trash:before {
    color: darkgreen;
}

Answer 2

I believe it is simple. Just add the .btn as "heir" to his tr.selected and apply the style in it.

Thus:

table.dataTable tbody tr.selected .btn { 
  color: inherit; 
}

The inherit will cause the same color of tr.select be applied in .btn.