CSS按钮不保持焦点格式

Question

我试图制作两个按钮，当一个集中时，另一个不集中。到目前为止，我有以下代码:

.btn {
border: none;
display: inline-block;
background-color: inherit;
font-size: 10px;
cursor: pointer;
font-weight: 100;
text-decoration: underline;
color: blue;
}
.btn:focus {
border: none;
background-color: inherit;
font-size: 10px;
color: dimgrey;
cursor: pointer;
display: inline-block;
font-weight: 100;
text-decoration: none;
}

<button onclick="this.disabled=true;document.getElementById('down7913').disabled=false;" type="submit" class="btn positive" name="up7913" id="up7913" >Full</button>|
<button onclick="this.disabled=true;document.getElementById('up7913').disabled=false;" type="submit" class="btn negative" name="down7913" id="down7913" >Short</button>

但是，聚焦格式只在按钮被主动按下时应用。释放按钮后，将立即应用未聚焦的格式。我知道html做了我想要它做的事情(在这里找到)。那么，如何使聚焦格式持久存在呢?jsfiddle

Answer 1

在CSS中尝试，

.btn:focus, btn:active {
border: none;
background-color: inherit;
font-size: 10px;
color: dimgrey;
cursor: pointer;
display: inline-block;
font-weight: 100;
text-decoration: none;
}

或者，试试这个:

.btn:disabled {
border: none;
display: inline-block;
background-color: inherit;
font-size: 10px;
color: dimgrey;
cursor: pointer;
display: inline-block;
font-weight: 100;
text-decoration: none;
}

.btn:disabled保证工作