標準のボタンのハイライトは、境界線のスタイルに消えここ

Question

はフィドル

https://jsfiddle.net/an5fg5t2/

.differentbutton { 
 
    margin: 1px; 
 
    border-radius: 4px; 
 
    border: 1px solid DarkGrey; 
 
    height: auto; 
 
    padding-top: 2px; 
 
    padding-bottom: 2px; 
 
}

<button> 
 
    standard 
 
</button> 
 

 
<button class="differentbutton"> 
 
    Different 
 
</button>

である私がしたすべては、IEのボタンが同じになりますので、カップルのスタイルを追加した変更FFクロムとサファリ。しかし、この変更により、ホバーのハイライトが消えてしまいました。すべてのスタイルを削除して1つずつ追加すると、境界宣言によってホバーのハイライトが機能しなくなります。

私の検索では、他のプラットフォームでは複雑な問題が発生しました。この動作をサポートするドキュメントはありますか？どのように私はこの動作を変更で維持することができますか？

Answer 1

それはあなたが上にマウスを移動するとき、あなたはあなたのコードにCSSの以下のビットを追加する必要がハイライト表示するために取得するには：

.differentbutton:hover { 
    border: 1px solid Grey; 
} 

あなたが上にカーソルを移動したときに、その後、クラス.differentbuttonの下にそれを追加した場合ボタンを押すと、ボタンが強調表示され、適切に表示されるように色を変更します。