如何實現點擊時持久改變按鈕樣式？

按下按鈕選擇器

問題：

您遇到想要修改的場景按下按鈕以創建明顯的視覺回饋時的外觀。您嘗試使用 :active 偽類，但樣式變更僅在您按一下並按住按鈕時發生。

答案：

而 :active偽類似乎是一個合適的選項，它是專門設計用於在主動按下元素時設置元素的樣式的。為了達到您想要的效果，建議使用替代方法。

考慮使用錨元素 而不是 元素。這可能與您最初的要求不完全一致，但如果您無法使用 找到直接解決方案，它會帶來額外的可能性：

CSS 代碼：

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

HTML 程式碼：

<code class="html"><a id="btn" href="#btn">Demo</a></code>

透過這個方法，您現在可以觀察以下行為：

• 正常狀態：按鈕白色
• 點擊時：按鈕變綠
• 釋放後：按鈕變紅

以上是如何實現點擊時持久改變按鈕樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！