どのようにHTMLの入力/ボタンからフォーカス矩形を削除するには？

Question

私は自分のページにこの入力ボタン（type="button"）を得た：

を、私はそれをクリックすると周りに迷惑フォーカス四角形がある：

どのように削除することができますそれ？ここで

は私のコードです：

/*Buttons/Inputs*/ 
 
        
 
.runInput { 
 
    border-top: 1px solid #ffffff; 
 
    background: #001cbd; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#148bfa), to(#001cbd)); 
 
    background: -webkit-linear-gradient(top, #148bfa, #001cbd); 
 
    background: -moz-linear-gradient(top, #148bfa, #001cbd); 
 
    padding: 6.5px 13px; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; 
 
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; 
 
    box-shadow: rgba(0,0,0,1) 0 1px 0; 
 
    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
 
    color: #ffffff; 
 
    font-size: 24px; 
 
    font-family: Helvetica, Arial, Sans-Serif; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    } 
 
.runInput:hover { 
 
    background: #001cbd; 
 
    color: #d9d9d9; 
 
    } 
 
.runInput:active { 
 
    background: #00046e; 
 
    } 
 
.runInput:focus { 
 
    outline: 0; 
 
}

<input class="runInput" onclick="runCode();" type="button" value="Run">

私は私のCSSにoutline: none;を追加しようとしましたが、それは動作しませんでした。あなたの答えを事前に

ありがとう！

EDIT：私はあなたがoutlineでこれを達成することができるはずスニペット

Answer 1

だけ追加：

:focus { 
    outline: 0 !important; 
} 

これは、すべての要素のために働くだろう。

それとも

あなたはこのクラスのためにのみ必要な場合は、その後の

.runInput:focus { 
    outline: 0 !important;; 
} 

Answer 2

を変更するが、それは正しく参照する必要があります。

.runInput:focus { 
    outline: 0; 
} 

OR

.runInput:focus { 
    outline: none; 
} 

JSfiddle example