Кнопки таблицы начальной загрузки стиля - btn-primary dropdown-toggle

Как я могу полностью стилизовать кнопки таблицы начальной загрузки, в настоящее время кнопки остаются синими, а при наведении курсора на мои кнопки стола только половина кнопки делает цвет, который я хочу, я бы хотел, чтобы кнопка была черной (# 282828), а затем немного светлее при наведении курсора или активный.

JSFiddle внизу вопроса

При наведении указателя мыши на правую кнопку на картинке

Моя таблица генерируется javascript

 function bootstrapTableStateHandler(origin, msg, type) {
    console[type]("[bootstrapTable." + origin + "]", msg)
}
 var $table = $('#results');
         $table.bootstrapTable({
              url: 'getresults.php',
              search: true,
              buttonsClass: 'primary',
              showFooter: false,
              minimumCountColumns: 2,
              columns: [{
                  field: 'results',
                  title: 'results',
                  sortable: true,
              }, ....So on and so forth

И раскрывающийся список включен этим в таблице

<table id="results" data-show-columns="true" data-show-toggle="true"></table>

Я попытался стилизовать все, используя приведенный ниже CSS, и кнопка остается синей, когда я нахожу на нее, только половина кнопки становится черной - хотя контур становится черным - извините за столько CSS

.btn-primary { 
  color: #ffffff !important; 
  background-color: #282828 !important; 
  border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #1F1B1B; 
  border-color: #282828 !important; 
} 

.btn-primary .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}
.dropdown-toggle { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  background-image: none; 
} 

.dropdown-toggle.disabled, 
.dropdown-toggle[disabled], 
fieldset[disabled] .dropdown-toggle, 
.dropdown-toggle.disabled:hover, 
.dropdown-toggle[disabled]:hover, 
fieldset[disabled] .dropdown-toggle:hover, 
.dropdown-toggle.disabled:focus, 
.dropdown-toggle[disabled]:focus, 
fieldset[disabled] .dropdown-toggle:focus, 
.dropdown-toggle.disabled:active, 
.dropdown-toggle[disabled]:active, 
fieldset[disabled] .dropdown-toggle:active, 
.dropdown-toggle.disabled.active, 
.dropdown-toggle[disabled].active, 
fieldset[disabled] .dropdown-toggle.active { 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.dropdown-toggle .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}

Что мне нужно стилизовать, чтобы кнопки таблицы были черными (# 282828) Глядя на вывод страницы, кнопка при проверке называется btn btn-primary dropdown-toggle

Спасибо

JSfiddle


button css twitter-bootstrap bootstrap-table
person Anthony    schedule 31.07.2017    source источник
comment
Можете ли вы предоставить HTML только для кнопок и CSS? Желательно в работающем JS-Fiddle. Я думаю, что javascript, который вы использовали для создания html, может не иметь отношения к вопросу, если вы предоставите html.   -  person Rob Monhemius    schedule 01.08.2017
comment
Добавлен JSFiddle моей проблемы   -  person Anthony    schedule 01.08.2017

Ответы (2)


arrow_upward
1
arrow_downward

Если вы используете background вместо background-color, вы сможете изменить настройки. Это связано с тем, что этот бутстрап использует линейные градиенты, которые являются фоновым изображением и будут наверху. Поэтому вам нужно переопределить это свойство, чтобы ваш цвет был виден. Вы также можете использовать background-image: none и background-color: #282828, но простое использование background: #282828 выполняет свою работу и требует меньше усилий.

https://jsfiddle.net/bonez0607/0qkubms6/

.btn-primary { 
  color: #ffffff !important; 
  background: #282828; 
  border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #ffffff; 
  background: #484848; 
  border-color: #282828 !important; 
} 

.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #1F1B1B; 
  border-color: #282828; 
} 

.btn-primary .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}
.dropdown-toggle { 
  color: #ffffff; 
  background: #282828; 
  border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  color: #ffffff; 
  background: #484848; 
  border-color: #282828 !important; 
}
person Joe B.    schedule 31.07.2017
comment
Спасибо тебе за это - person Anthony; 01.08.2017

arrow_upward
1
arrow_downward

Я попытался воспроизвести проблему. Я придумал этот код: https://jsfiddle.net/gemkzwva/. Это объясняет, что происходит в коде.

<button></button>
<button id="fixed"></button>

button{
  height: 50px;
  width: 100px;
  background-image: linear-gradient(red, blue);/*bootstrap-theme behaviour*/
}
button:hover{
  background-position: 0 25px;/*bootstrap-theme behaviour*/
}
#fixed:hover{
  background-position: 0; /*override background-position */
  background-image: none; /*remove the bootstrap-theme image/linear-gradient*/
  background-color: green;
}

Поведение background-image и background-position запускается классом .btn-primary в вашем файле bootstrap-theme.min.css. Итак, вы могли:

  • удалите эту тему.
  • сделайте соответствующие изменения.
  • удалите класс btn-primary и создайте собственный в своем собственном коде.
person Rob Monhemius    schedule 01.08.2017