web-dev-qa-db-ja.com

ブートストラップを使用してアクティブなときにボタンの色を変更するにはどうすればよいですか？

bootstrap 3を使用しています。ボタンをクリックしたときにボタンの色を変更したいのですが、ボタンを選択したときはボタンの色を変える必要があります。 cssを使用してこれを行うにはどうすればよいですか？

私のコードは次のとおりです。

<div class="col-sm-12" id="">
    <button type="submit" class="btn btn-warning" id="1">Button1</button>
    <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
csscss3twitter-bootstraptwitter-bootstrap-3
20
Priyank Dey

CSSには、このような効果を実現できるさまざまな擬似セレクタがあります。あなたの場合には、使用することができます

：active：ボタンがクリックされたときにのみ背景色が必要で、永続化しない場合。

：focus：ボタンにフォーカスが合うまで背景色が必要な場合。

button:active{
    background:olive;
}

そして

button:focus{
    background:olive;
}

JsFiddleの例

追伸：html要素のId属性に番号を指定しないでください。

46
Sachin

CSSには、：active、：hover、：focusなどの多くの擬似セレクターがあるため、使用できます。

HTML

<div class="col-sm-12" id="my_styles">
     <button type="submit" class="btn btn-warning" id="1">Button1</button>
     <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

css

.btn{
    background: #ccc;
} .btn:focus{
    background: red;
}

JsFiddle

6
Ali Haider

HTML--

<div class="col-sm-12" id="my_styles">
   <button type="submit" class="btn btn-warning" id="1">Button1</button>
   <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

css--

.active{
         background:red;
    }
 button.btn:active{
     background:red;
 }

jQuery--

jQuery("#my_styles .btn").click(function(){
    jQuery("#my_styles .btn").removeClass('active');
    jQuery(this).toggleClass('active');

}）;

jsfiddle でライブデモを見る

4
Sarower Jahan