Change color of DataTables search bar - html

Question

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:
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:
And the CSS code I have added:
/*Change Search Bar to White*/
.myTable_filter {
color: white;
}
#dataTables_filter {
color: white;
}
Any thoughts?

Answer 1

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