Table Style 4

The following is a solution to customize a hover background color on a table's search box, reload, and checkbox.

Step 1

Add the following code to the header section of your app.

<style>
    .table-style-4 h3 {
        color: #181C32;
        font-weight: 400;
        padding-left: 7px;
        padding-bottom: 10px;
        margin: 0;
    }

    .table-style-4 .table-wrap>.table tr {
        color: #3F4254;
        background-color: #fff;
    }

    .table-style-4 table,
    .table-style-4 table>thead>tr>th,
    .table-style-4 table>tbody>tr>th,
    .table-style-4 table>tfoot>tr>th,
    .table-style-4 table>thead>tr>td,
    .table-style-4 table>tbody>tr>td,
    .table-style-4 table>tfoot>tr>td {
        border-color: #e1e6f1;
        padding: 8px 10px;
    }

    .table-style-4 {
        webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

    .table-style-4 table>tbody>tr>td {
        color: #334151;
    }

    .table-style-4 .table-responsive {
        background-color: white;
        padding: 1rem;
    }

    .table-style-4 table>thead>tr>th {
        color: #334151;
        text-transform: uppercase;
        vertical-align: middle;
        border-bottom: none;
        font-size: 13px;
        font-weight: 600;
    }

    .table-style-4 .table-actions {
        background: none;
        padding: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #ddd;
    }

    .table-style-4 .table-actions.pad-0 {
        padding: 0px;
        border: none;
    }

    .table-style-4 table a:not(.btn) {
        text-decoration: none;
    }

    /* Check box css */
    .table-style-4 input[type='checkbox'] {
        margin-top: -30px;
    }

    .table-style-4 input[type='checkbox'] {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
        width: 24px;
        height: 24px;
        margin: 0;
        margin-right: 1px;
        display: block;
        float: left;
        position: relative;
        cursor: pointer;
    }

    .table-style-4 input[type='checkbox']:after {
        content: "";
        vertical-align: middle;
        text-align: center;
        line-height: 24px;
        position: absolute;
        cursor: pointer;
        height: 24px;
        width: 24px;
        left: 0;
        top: 0;
        font-size: 12px;

        -moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;

        background: #EBEDF3;
    }

    .table-style-4 input[type='checkbox']:hover:after,
    input[type='checkbox']:checked:hover:after {
        background: #EBEDF3;
        content: '\2714';
        color: #fff;
    }

    .table-style-4 input[type='checkbox']:checked:after {
        background: #3699FF;
        content: '\2714';
        color: #fff;
    }

    /* Search box  */
    .table-style-4 .input-group input.form-control.input-sm.padder {
        border-right: none;
        border: 1px solid #ddd;
        box-shadow: unset;
    }

    .table-style-4 .input-group-btn {
        border: 1px solid #ddd;
        background: none;
        border-left: none;
    }

    .table-style-4 .input-group-btn .btn {
        background: none;
        color: #ddd;
        padding: 0px 10px;
    }

    .table-style-4 .input-group-btn .btn:focus {
        outline: none;
    }

    .table-style-4 .input-group-btn .btn:active {
        box-shadow: none;
    }

    /* Relaod  button */
    .table-style-4 .table-actions .btn-primary {
        background: none;
        color: #2780e3;
        border: 1px solid #2780e3;
    }

    .table-style-4 .table-actions .btn-primary:hover {
        background: #2780e3;
        color: #fff;
        border: 1px solid #2780e3;
    }

    .table-style-4 .table-actions .btn-info {
        background: none;
        color: #9954bb;
        border: 1px solid #9954bb;
    }

    .table-style-4 .table-actions .btn-info:hover {
        background: #9954bb;
        color: #fff;
        border: 1px solid #9954bb;
    }

    .table-style-4 .table-actions .btn-danger {
        background: none;
        color: #ff0039;
        border: 1px solid #ff0039;
    }

    .table-style-4 .table-actions .btn-danger:hover {
        background: #ff0039;
        color: #fff;
        border: 1px solid #ff0039;
    }
</style>