CODEWITHSUNDEEP
htmldatatables
CKneeland
CKneeland

Reputation: 119

Change color of DataTables search bar

I have a dark background on my webpage, so when I implement DataTables into my project, the search bar is barely visible. I import the scripts instead of directly having the source code for DataTables in my project, so I can't change the color of the search bar there.

How might I change the color from black to white? This is what it looks like at the moment: enter image description here

Here is my code, I'm using Razor Pages

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}

@section Scripts
{
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').dataTable({
                "paging": false,
                columnDefs: [{
                    targets: -1,
                    className: 'dt-head-center'
                }]
            });
        });
    </script>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">





<h1 align="center" style="color:yellowgreen">1) Select/Add Customer</h1>

<br />
<div>
    <p align="center">
        <a class="btn btn-dark"
           asp-page="/Index"><i class="glyphicon glyphicon-arrow-left"></i> Back</a>
        <a class="btn btn-dark"
           asp-page="./AddCustomer"><i class="glyphicon glyphicon-plus"></i>  Add New Customer</a>
        <a class="btn btn-dark"
           asp-page="./ListAssessments"><i class="glyphicon glyphicon-plus"></i>  Use Existing Assessment</a>
    </p>
</div>

<table id="myTable" class="display cell-border stripe" role="grid" style="background-color: #dbdbdb; text-align:center; width: 100%">
    <thead class="text-light">
        <tr class="text-dark">
            <th style="text-align: center"><strong>Customer</strong></th>
            <th style="text-align: center"><strong>Notes</strong></th>
            <th style="text-align: center"><strong>New Assessment</strong></th>
        </tr>
    </thead>
    <tbody style="background-color: #dbdbdb;">
        @foreach (var customer in Model.Customers)
        {
            <tr class="text-dark">
                <td style="padding-top: 15px">@customer.name</td>
                <td style="padding-top: 15px">@customer.notes</td>
                <td>
                    <a class="btn btn-dark"
                       asp-page="/Assessment/AddAssessment" asp-route-customerId="@customer.customer_id">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>

Edit: Found the class and id that links to the search bar, added new definitions into the CSS to try and overwrite it, but no new results...

Here is a screenshot of the Inspect: enter image description here

And the CSS code I have added:

/*Change Search Bar to White*/
.myTable_filter {
    color: white;
}

#dataTables_filter {
    color: white;
}

Any thoughts?

Upvotes: 0

Views: 1427

Answers (1)

Derek Wang
Derek Wang

Reputation: 10204

That search-box on dataTable seems to be generated by the package script.

So you can change the background color of input tag by overriding the css style only.

Based on inspect screenshot, this will work.

#myTable_wrapper .dataTables_filter input {
  background-color: white;
}

Upvotes: 1

Related Questions