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）。那么如何让焦点格式保持不变呢？ 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 保证可以工作。