html下拉框按钮颜色,更改引导按钮和下拉切换的颜色(Changing colors on bootstrap buttons and dropdown-toggle)...

更改引导按钮和下拉切换的颜色(Changing colors on bootstrap buttons and dropdown-toggle)

我有一个按钮组如下：

HTML

Sync

New PG

• Test1
• Test2

CSS：

.red-outline-button:hover {

border-color: #C4213C;

background-color: #f8d3d9;

color: #000

}

.gold-outline-button:hover {

border-color: #B3892F;

background-color: #f4ebd7;

color: #000;

}

以上工作。 当我将鼠标悬停在按钮上时，颜色会发生变化。 但是，当我单击并按住或单击第二个按钮以显示下拉列表时，颜色将切换回默认灰色。

我试过.red-outline-button:active但没有帮助。

我的问题是，在以下情况下设置css颜色的正确方法是什么：

按下按钮

打开下拉列表(仅限按钮。我不需要设置实际下拉列表的样式

I have a button group as below:

HTML

Sync

New PG

• Test1
• Test2

CSS:

.red-outline-button:hover {

border-color: #C4213C;

background-color: #f8d3d9;

color: #000

}

.gold-outline-button:hover {

border-color: #B3892F;

background-color: #f4ebd7;

color: #000;

}

The above works. When I hover the mouse over the buttons, the color changes. However, When I click and hold or click the second button to reveal the dropdown, then, the color switches back to the default gray.

I've tried .red-outline-button:active but that did not help.

My question is, what is the right way to set css colour when:

Button is pressed

Dropdown is opened (only the button. I don't need to style the actual dropdown

原文：https://stackoverflow.com/questions/40762013

更新时间：2020-06-07 11:06

最满意答案

您需要覆盖默认的 Bootstrap类：

.btn-default.focus, .btn-default:focus

这将适用于您不想覆盖所有：

.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {

border-color: #B3892F;

background-color: #f4ebd7;

color: #000;

}

希望它能帮到你。 :)

You need to override the default Bootstrap classes:

.btn-default.focus, .btn-default:focus

This will work in case you don't want to override all:

.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {

border-color: #B3892F;

background-color: #f4ebd7;

color: #000;

}

Hope it helps you. :)

相关问答

您的html结构与您发布的示例不同。 只是改变： $('#button_group_1 button').removeClass('active');

对此： $('.btn-group button').removeClass('active');

和addClass一样...... your html structure is not the same as the example you posted. just change: $('#button_group_1 button').r

...

我有同样的问题，它正在驱使我疯狂！ 直到我发现我正在加载bootstrap之前jqueryui ... 我切换了订单并注意到，如果我加载jqueryui BEFORE引导之前 ，我没有这样的问题:) I had the same problem and it was driving me mad!!!! Until I found that I was loading bootstrap before jqueryui... I switched the order and notice that

...

实际input复选框在花式div.toggle-group后面隐藏( display: none )。 这个div只是看起来像一个使用CSS和JavaScript切换的复选框。 事实上，复选框实际上是在场景后面聚焦/标签，你只是无法看到它，因为它的隐藏。 如果你不需要，你可以编写明确的JQuery来关注隐藏的复选框时关注外部元素。 这里是你需要包含的JQuery代码： $( "input:checkbox" ).focus(function() {

if($(this).is(':checke

...

CSS： .navbar-default .navbar-nav > .open > a,

.navbar-default .navbar-nav > .open > a:focus,

.navbar-default .navbar-nav > .open > a:hover {

background: red;

}

CSS: .navbar-default .navbar-nav > .open > a,

.navbar-default .navbar-nav > .open > a:fo

...

我会建议你使用这个简单的CSS来实现你想要的 - /* Change color of dropdown links on hover */

.dropdown-menu a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-menu {

display: block;

}

/* Change the background c

...

在Knockout中，你不会使用DOM。 您为应用程序状态建模并操纵模型。 Knockout绑定负责更新UI。 要更改选择的项目，只需设置绑定变量( view )。 在示例中，下拉列表将从没有值开始，然后它将被赋予我们想要的值。 vm = {

view: ko.observable()

};

ko.applyBindings(vm);

// Simulating fetching from cookie and setting

setTimeout(() => vm.view

...

我设法解决了这个问题。 这只是一个愚蠢的错误。 列表中的数据由异步进程填充。 所以我应该在点击下拉按钮后使用fakeAsync和tick() 。 在将数据填充到列表中之前，视图已更新。 这导致了这个问题。 这是固定的代码： it("Should show options when toggle option is clicked",fakeAsync(() => {

fixture.detectChanges();

let toggleButton = fixture.debu

...

rails中的一些奇怪的bug：我的application.js最初是： //= require jquery

//= require jquery_ujs

//= require jquery-ui

//= require bootstrap

我不得不重新排序它并在jquery之前移动bootstrap 修改了application.js //= require bootstrap

//= require jquery

//= require jquery_ujs

//= require jq

...

您可以使用Pseudo Classes：请参阅CSS Pseudo-classes 。 .navbar-inverse .navbar-nav li:first-child:hover {

background-color: green;

}

.navbar-inverse .navbar-nav li:nth-child(2):hover {

background-color: lightblue;

}

.navbar-inverse .navbar-nav li:nth-c

...

您需要覆盖默认的 Bootstrap类： .btn-default.focus, .btn-default:focus

这将适用于您不想覆盖所有： .gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {

border-color: #B3892F;

background-color: #f4ebd7;

color: #000;

}

工作演示： http ： //www

...