web-dev-qa-db-ja.com

bootstrapクリック時にデフォルトの色を表示するボタン

私は以下のコードでボタンの色をスタイルしようとしていますが、ボタンをクリックするまで色が機能し、ボタンはデフォルトの色を表示しますが、ボタンのクリックの色を指定するにはどうすればよいですか？

.btn-success { 
 color: #ffffff; 
 background-color: #161617; 
 border-color: #494F57; 
} 

.btn-success:hover, 
.btn-success:focus, 
.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 color: #ffffff; 
 background-color: #1F2838; 
 border-color: #494F57; 
} 

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

.btn-success.disabled, 
.btn-success[disabled], 
fieldset[disabled] .btn-success, 
.btn-success.disabled:hover, 
.btn-success[disabled]:hover, 
 fieldset[disabled] .btn-success:hover, 
.btn-success.disabled:focus, 
.btn-success[disabled]:focus, 
fieldset[disabled] .btn-success:focus, 
.btn-success.disabled:active, 
.btn-success[disabled]:active, 
fieldset[disabled] .btn-success:active, 
.btn-success.disabled.active, 
.btn-success[disabled].active, 
fieldset[disabled] .btn-success.active { 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success .badge { 
  color: #161617; 
 background-color: #ffffff; 
}
csstwitter-bootstrapbuttoncolors
28
user3312792

:activeセレクターは、クリックに必要なものです。

.btn-sample:active {
  // click styles here
}

上記のように見えるため、box-shadowがactiveボタン状態にも適用されているために、わずかに異なる色が表示されている場合がほとんどです。次のように無効にします：

.btn-sample:active {
  box-shadow: none;
}

編集：cssをオーバーライドするセレクターは、実際にはbtn-success:active:focusです。したがって、cssに次を追加する必要があります。

.btn-success:active:focus {
  color: #ffffff; 
  background-color: #161617; 
  border-color: #494F57;
}

以下の私のコメントに加えて、希望するスタイルを適用できるbtn-customなどの独自のクラスを作成した方が良いでしょう。これを既存のbtnクラスと組み合わせると、既存のセレクターをオーバーライドする必要がないため、はるかに少ないコードで目的の結果を達成できます。

60
Guy

それを正しく行うには、!important宣言を使用する必要があります。

.btn-success:hover, .btn-success:active, .btn-success:focus {
  color: #ffffff !important;
  background-color: #1F2838 !important;
  border-color: #494F57 !important;
}
19
xxxbence

CSSに次のコードを追加するだけです

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617; 
border-color: #494F57; 
}
2
Amanjot Kaur

$ -off-whiteと$ brand-blackが定義されているこれらのさまざまなボタン状態をオーバーライドするための bootstrap source からのインスピレーション：

.btn-success {
  &:hover,
  &:focus,
  &.focus {
    color: $off-white;
    background-color: $brand-black;
  }

  &:active,
  &.active,
  &.disabled,
  &:disabled {
    color: $off-white;
    background-color: $brand-black;

    &:focus,
    &.focus {
      color: $off-white;
      background-color: $brand-black;
    }
  }
}
1
Bill Brock

デフォルトの色のボタンを押すアニメーションは、背景画像によるものです。名前付きスタイル（btn-default、btn-successなど）ごとにこれを使用します。

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

チームではなく個人プロジェクトで作業している場合、クラスの同じスタイル宣言に「！important」を適用するだけで擬似クラススタイルをオーバーライドできることに注意してください。

.btn-success { color: #ffffff !important; background-color: #161617 !important; border-color: #494F57 !important; }

一般的に、！importantを避けることをお勧めします。これは、btn-successクラスのすべての色、背景色、および境界線色のスタイル宣言をオーバーライドするためです（後でスタイル宣言を！importantで再度オーバーライドしない限り）スタイルシート）.

ただし、目標が可能な限り最小のファイルサイズで、このクラスを同じ方法で使用している場合（インラインスタイルがないことを意味する場合）は、これが最適なオプションです。

または、同じ考え方を使用して、.btn-success-importantのような新しいカスタムクラスに名前を付けて、オーバーライドを使用する必要があるbtn-successの後にのみ適用することもできます。

ただし、キャッチが1つあります。btn-successまたは.btn-success-importantを他のBootstrap .btn-groupと組み合わせている場合、！importantは、内部で宣言された擬似クラススタイルをオーバーライドします。この場合、Guyの答え（！importantスタイル宣言のないカスタムクラス）の方が良いかもしれません。

0
colemerrick