のjQuery UIボタンをクリックして

Question

を開催したときに、私はゲームのリストでのjQuery UIのselectmenuを表示し、また、ゲームのリストを反復処理し、そのためのjsFiddleを用意している2つのボタンを表示したいと思い育つ：

HTMLコード：

<form> 
    <select name="games" id="games"></select> 
    <button id="prevGame">&lt;</button> 
    <span id="currGame">Game #2</span> 
    <button id="nextGame">&gt;</button> 
</form> 

JavaScriptコード：

$("#games").selectmenu(); 

setTimeout(function() { 
    updateGamesMenu(); 
}, 6000); 

$('#prevGame').button().click(function(e) { 
    e.preventDefault(); 
    $('#currGame').html('<i>Prev game</i>'); 
}); 

$('#nextGame').button().click(function(e) { 
    e.preventDefault(); 
    $('#currGame').html('<i>Next game</i>'); 
}); 

function updateGamesMenu() { 
    var yourGames = []; 
    for (i = 1; i < 3; i++) { 
    yourGames.push('<option value="' + i + '">Game #' + i + '</option>'); 
    } 
    var yourGroup = '<optgroup label="Your turn">' + yourGames.join('') + '</optgroup>'; 

    var hisGames = []; 
    for (i = 5; i < 9; i++) { 
    hisGames.push('<option value="' + i + '">Game #' + i + '</option>'); 
    } 
    var hisGroup = '<optgroup label="Their turn">' + hisGames.join('') + '</optgroup>'; 

    $("#games").selectmenu('destroy') 
    .append(yourGroup) 
    .append(hisGroup) 
    .selectmenu(); 
} 

（2つのボタンと垂直に整列していない選択メニューの小さな問題を除いて）問題なく動作します。

に同じコードを入力すると、ボタンがオレンジ色になり、ボタンをクリックするとサイズが大きくなります（別名オンモスタウン）。

どうしますか？

Firefoxのコンソールのボタンの要素を調べて、ボタンをクリックして保持するとボタンがui-state-activeのCSSスタイルになることに気付きましたが、どこを見てもわかりません。

UPDATE：

私はmy updated jsFiddleにWordpress twentythirteen theme style.cssからボタンに関連する部分をコピーした、今そこに問題を再現することができます

/* Buttons */ 
button, 
input[type="submit"], 
input[type="button"], 
input[type="reset"] { 
    background: #e05d22; /* Old browsers */ 
    background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ 
    background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ 
    border: none; 
    border-bottom: 3px solid #b93207; 
    border-radius: 2px; 
    color: #fff; 
    display: inline-block; 
    padding: 11px 24px 10px; 
    text-decoration: none; 
} 

button:hover, 
button:focus, 
input[type="submit"]:hover, 
input[type="button"]:hover, 
input[type="reset"]:hover, 
input[type="submit"]:focus, 
input[type="button"]:focus, 
input[type="reset"]:focus { 
    background: #ed6a31; /* Old browsers */ 
    background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ 
    background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ 
    outline: none; 
} 

button:active, 
input[type="submit"]:active, 
input[type="button"]:active, 
input[type="reset"]:active { 
    background: #d94412; /* Old browsers */ 
    background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ 
    background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ 
    border: none; 
    border-top: 3px solid #b93207; 
    padding: 10px 24px 11px; 
} 

だからこれは私の質問になりますCSS関連 - クリックするとボタンのサイズが大きくなるのはなぜですか？ CSS-ルーキーとして

私は最後の2行をコメントしようとしたが、それは助けにはならない：

/* border-top: 3px solid #b93207; */ 
/* padding: 10px 24px 11px; */ 

Answer 1

button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active { 
    background: #d94412; 
    background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); 
    background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); 
    border: none; 
    border-top: 3px solid #b93207; 
    padding: 10px 24px 11px; 
} 

それとも設定から

button:active 

を削除します0にパディングしています。

button:active{ 
    padding: 0; 
} 

アクティブにする（クリックする）と拡大されないようにします。要素の状態を見るために

一つの方法は、クロムで検査し、検査ツールを使用することです：

またはそれらのボタンが自分のIDのよう

button#nextGame:active, 
button#prevGame:active{ 
    padding:0; 
}