Angular-datatables Bootstrap 搜索栏 CSS [关闭]

【问题标题】：Angular-datatables Bootstrap search bar CSS [closed]Angular-datatables Bootstrap 搜索栏 CSS [关闭]
【发布时间】：2016-07-19 01:07:02
【问题描述】：

我将 angular-datatables 与 Bootstrap 集成一起使用。但是，搜索栏看起来很奇怪。它看起来不像具有漂亮发光效果的普通 Bootstrap 文本字段。

这是 angular-datatables 搜索栏：

这是 Jquery Datatables 搜索栏：

我没有做错任何事，因为 angular-datatables 网站上的演示看起来一样：https://l-lin.github.io/angular-datatables/#/bootstrapIntegration

有谁知道我如何在角度数据表中使用常规的 Bootstrap 外观？也许我可以更改一些 CSS 代码？

【问题讨论】：

标签： css angularjs twitter-bootstrap angular-datatables

【解决方案1】：

Angular dataTables 使用这个 css 类 .dataTables_filter input[type="search"] 覆盖引导 css，所以如果你想重新获得引导 css，你应该从 angular-datatables.css 文件中删除这个类。

如果您不想编辑 dataTables css，可以添加：

.dataTables_filter input[type="search"]:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

到您的 css 文件中，将其放在角度数据表和引导 css 之后。

【讨论】：

谢谢！我刚试过，它有效！但是，我真的不想更改默认的 .css 文件，而是在单独的 .css 文件中进行自己的更改。你有办法吗？
@T.Ferreira 更新了我的答案，
做到了！太感谢了！ :)