的CSS按鈕：焦點

Question

我想集中添加到我的按鈕，這樣當有人點擊一個，它會改變顏色
我試圖.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元素，但也適用於像div的其他元素，如果他們有contentEditable屬性。

因此，重點爲input[type=submit]，input[type=button]或按鈕元素將無法正常工作。

而是使用:active

快速提示：您可以使用W3C Markup Validation Service來檢查，如果你的HTML是有效的。

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>