Question

我正在ASP.Net Core 2.1网站上工作，并且正在使用bootstrap和datatables.net数据表，并应用了datatables.net-bs4节点模块。

我已通过在bootstraps _custom-variables.scss文件中设置所需的颜色来为网站自定义颜色主题，然后将其导入custom.scss文件中，并使用gulp将其转换为在网站的css中使用的颜色_layout.cshtml。这符合Bootstraps recommended approach to customizing the theme.

这对datatable组件中的每页选择器控件除外的所有项目都适用。

这是数据表上搜索控件的图像，其中显示了所需的输入焦点边框颜色。

这是同一数据表，显示每页控件的项目。

请注意每页项目控件焦点边框颜色如何变亮，使颜色看起来更像青色。

如何纠正此问题，以使每页控件的焦点边框颜色与搜索框控件上的焦点边框相同？

沿着同一行，数据表上每页控件的项目显示html 5数字微调箭头。我已将代码添加到我的站点CSS中以禁用微调箭头。此方法适用于具有带有数字输入字段的表单字段，但对数据表中的每页控件的项目没有影响。

这是我用来删除数字微调箭头的css代码。

    input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

这适用于我的普通表单输入控件，如下图所示。

添加CSS之前

添加CSS后

但是，datatable.net数据表中的每页控件项仍然显示微调器，如下所示；

如何从每页控件的项目中删除微调箭头？

更新11/8/18 。感谢@zgood，我能够在site.css

中使用以下替代项解决此问题

    /* Overide the entries per page select control style on the data table */
    .dataTables_length select {
        background: White;
    }

    /* Override all focus glow color/effects for Datatables.net control*/
    .dataTables_length select:focus {
        border-color: rgba(126, 220, 104, 0.8);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
        outline: 0 none;
    }

Answer 1

DataTables在background的{{1}}样式上添加了一个微调框类型图标。您可以使用以下样式在CSS中覆盖它：

select

DataTables将使用名为.dataTables_length select { background: none; }的类包装所有“长度”控件，使用.dataTables_length包装所有的“过滤”控件，使用dataTables_filter包装所有的“ info”控件，以及全部dataTables_info来控制“分页”。

因此，您可以使用这些类来定位样式。

您还可以查看DataTables的“ dom”选项，以配置这四个部分相对于表本身在DOM中的显示位置（例如，如果您希望长度更改dataTables_paginate位于表的左下方）表格而不是左上方）。 See here

如何在datatable.net datatable

1 个答案: