样式化数据表“搜索”

Question

我正在尝试设置“搜索”及其相关输入的样式，但它不会响应。

当我检查元素时，我可以看到数据表过滤器和信息的样式相同。我的 CSS 更改（字体大小）应用于表格下方的信息，但搜索文本和输入不合作。我使用 .6rem 作为字体大小来轻松验证是否应用了字体大小。

这是我添加的（我尝试了使用和不使用“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;
}

我确保在数据表自己的 CSS 之后加载自定义 CSS 文件。

也试过了：

$('.dataTables_filter input[type="search"]').css(
    {'font-size': '.6rem'}
);

还有：

.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter > label, .dataTables_wrapper .dataTables_filter > input {
    font-family: Arial, sans-serif;
    font-size: .6em;
}

Answer 1

使用这个：

div.dataTables_filter > label > input {
  font-family: Arial, sans-serif;
  font-size: .6em;
}

...为我工作。

使用像 .dataTables_filter > input 这样的 CSS 选择器将不起作用。它假定输入是dataTables_filter div 的直接子 (>) - 但事实并非如此，因为有一个介入的<label> 元素：

这样，您应该也可以避免使用!important。