Javascript 如何在datatable.net datatable中设置输入边框颜色并禁用数字微调器

我正在一个ASP.Net Core 2.1网站上工作，我正在使用引导和datatables.Net数据表，并应用datatables.Net-bs4节点模块

通过在bootstraps _custom-variables.scss文件中设置所需的颜色，我已经为我的站点定制了颜色主题，然后我将其导入custom.scss文件，并使用gulp将其转换为css，我在站点的_layout.cshtml中使用。这是符合

除了datatable组件中的每页项目选择器控件之外，这一切都可以正常工作

下面是datatable上搜索控件的图像，显示了所需的输入焦点边框颜色

这是显示每页控件项的相同数据表

请注意，每页项控件的焦点边框颜色更亮，使颜色看起来更像青色

如何更正此sop，使“每页项目”控件的焦点边框颜色与“搜索框”控件上的焦点边框颜色相同

沿着这些相同的行，datatable上的每页项控件显示HTML5数字微调器箭头。我已经在我的网站css中添加了禁用微调器箭头的代码。这适用于具有数字输入字段的“我的表单”字段，但对datatable中的每页项控件没有影响

下面是我用来删除数字微调器箭头的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 datatable中的每页项控件仍然显示微调器，如下所示

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

2018年8月11日更新。感谢@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;
    }

---

DataTables在

select

的

background

样式上添加一个微调器类型图标。您可以使用以下样式在css中覆盖此选项：

.dataTables_length select { background: none; }

DataTables将用一个名为

.DataTables\u length

的类包装所有“length”控件，用

DataTables\u filter

包装所有“filtering”控件，用

DataTables\u info

包装所有“info”控件，用

DataTables\u paginate

包装所有“pagination”控件

因此，可以使用这些类确定样式的目标

---

您还可以查看DataTables的“dom”选项，以配置这四个部分在dom中相对于表本身呈现的位置（例如，如果希望更改长度，请选择表左下角的

而不是左上角的
）
 您是否查看了数据表的
dataTables.bootstrap4.min.js
插件？看，这可能有助于生成与bootstrap 4样式匹配的标记。此外，微调器箭头是
选择
上需要覆盖的
背景
样式。i、 e.
.dataTables\u length select{background:none；}
@zgood您使用.dataTables\u length select{background:none；}的建议解决了微调器问题。另外，您确定了.dataTable_长度，这让我了解了如何更改每页焦点项的阴影框样式。谢谢。如果你想把它贴出来作为答案，我会把它标记为答案。