I've been attempting to customize the appearance of the "Search" text and input field, but they are not responding to my CSS changes.
Upon inspecting the elements, I noticed that the datatable filter and info sections have similar styles. Although my CSS modifications (specifically for font size) are being applied to the info section located below the table, the search text and input remain uncooperative. I opted for a font-size of .6rem for easy confirmation of the styling.
Here is the code snippet I tried adding (with and without the use of "div"):
.dataTables_info, .dataTables_filter > label, .dataTables_filter > input {
font-family: Arial, sans-serif;
font-size: .6em;
}
div.dataTables_info, div.dataTables_filter > label, div.dataTables_filter > input {
font-family: Arial, sans-serif;
font-size: .6em;
}
I took care to ensure that the custom CSS file loads after the datatable's own CSS.
Additionally, I experimented with the following approaches:
$('.dataTables_filter input[type="search"]').css(
{'font-size': '.6rem'}
);
And:
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter > label, .dataTables_wrapper .dataTables_filter > input {
font-family: Arial, sans-serif;
font-size: .6em;
}