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 做我想让它做的事（发现 here). So how do I get the focused formatting to persist? 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保证有效。

CSS 按钮未保持焦点格式

CSS button not maintaining focus formatting

html

css

focus