Я работаю на веб-сайте ASP.Net Core 2.1 и использую таблицы данных bootstrap и datatables.net с примененным модулем узла datatables.net-bs4.
Я настроил цветовую тему для своего сайта, установив нужные цвета в файле bootstraps _custom-variables.scss, а затем импортирую его в файл custom.scss и использую gulp, чтобы преобразовать его в css, который я использую на своем сайте. _layout.cshtml. Это соответствует рекомендованному Bootstraps подходу к настройке темы.
Это прекрасно работает для всего, кроме элементов на элементе управления селектором страниц в компоненте с данными.
Вот изображение элемента управления поиском в таблице данных, показывающее желаемый цвет границы входного фокуса.
и здесь та же таблица данных, показывающая элементы на странице управления.
Обратите внимание на то, как ярче становится цвет элементов рамки на элементе управления страницей, что делает цвет более похожим на голубой.
Как я могу исправить этот сопряженный элемент так, чтобы цвет рамки фокуса элементов на элементе управления страницы совпадал с границей фокуса в элементе управления окна поиска?
В тех же строках элемент управления на страницу в 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;
}
Это работает для моих обычных элементов управления вводом формы, как показано blow.
Перед добавлением CSS
После добавления CSS
Однако элементы управления на страницу в datatable.net все еще показывают счетчик, как показано ниже;
Как мне убрать стрелки счетчика с элементов на странице?
ОБНОВЛЕНИЕ 11/8/18 . Спасибо за @zgood, мне удалось решить проблему с помощью следующих переопределений на моем сайте. 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;
}