CSSのボタン：フォーカス

Question

は、私は誰かが1でクリックしたときにそう、それは私が.button:focusしようとした色
を変更します私のボタンにフォーカスを追加したいが、何もここで

を起こりません、私の抜粋です。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 

 
} 
 

 
.button { 
 
    padding:0; 
 
    margin:0; 
 
    border:none; 
 
    font-size:14px; 
 
    background:#333; 
 
    color: grey; 
 
    height:50px; 
 
    width:134px; 
 
    font-variant:small-caps; 
 
} 
 

 
.button:hover { 
 
    padding:0; 
 
    margin:0; 
 
    border:none; 
 
    font-size:14px; 
 
    background:#333; 
 
    color: #FF0000; 
 
    height:50pxpx; 
 
    width:134px; 
 
    text-decoration:none; 
 
    font-variant:small-caps; 
 
    background-color: #111; 
 
} 
 

 
.button:focus { 
 
    background:blue; 
 
}

<form action='' method="POST"> 
 
    <ul> 
 
    <li><input type="submit" name="login" class="button" value="Login In"></li> 
 
    <li><input type="submit" name="prodcuts" class="button" value="Products"></li> 
 
    <li><input type="submit" name="question" class="button" value="Question"></li> 
 
    </ul> 
 
</form>

Answer 1

織り：http://kodeweave.sourceforge.net/editor/#9838274385f08a1729905c5274944518

:focusのみinput[type=text]とtextarea要素に動作しますが、彼らはcontentEditable属性を持っている場合ものdivのような他の要素に取り組んでいます。

したがって、input[type=submit]、input[type=button]、またはボタンの要素のフォーカスが機能しません。

代わり:active

クイックヒントを使用する：あなたのHTMLが有効であるかどうかをチェックするためにW3C Markup Validation Serviceを使用することができます。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
.button { 
 
    cursor: pointer; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    font-size: 14px; 
 
    background: #333; 
 
    color: grey; 
 
    height: 50px; 
 
    width: 134px; 
 
    font-variant: small-caps; 
 
} 
 

 
.button:hover { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    font-size: 14px; 
 
    color: #f00; 
 
    height: 50px; 
 
    width: 134px; 
 
    text-decoration: none; 
 
    font-variant: small-caps; 
 
    background: #111; 
 
} 
 

 
.button:active { 
 
    background: blue; 
 
}

<form action='' method="POST"> 
 
    <ul> 
 
    <li><input type="submit" name="login" class="button" value="Login In"></li> 
 
    <li><input type="submit" name="prodcuts" class="button" value="Products"></li> 
 
    <li><input type="submit" name="question" class="button" value="Question"></li> 
 
    </ul> 
 
</form>