クリック時にボタンのスタイルを永続的に変更するにはどうすればよいですか?

押されたボタン セレクター

問題:

変更したいシナリオが発生しました。ボタンが押されたときの外観で、目に見える視覚的なフィードバックを生み出します。 :active 疑似クラスを使用しようとしましたが、ボタンをクリックして押したままにした場合にのみスタイルが変更されます。

答え:

:active の間pseudo-class は適切なオプションのように思えるかもしれませんが、要素がアクティブに押されている間に要素のスタイルを設定するように特別に設計されています。目的の効果を実現するには、別のアプローチをお勧めします。

アンカー要素 の使用を検討してください。 <ボタン>の代わりに要素。これは最初の要件と正確に一致しない可能性がありますが、:

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 中国語 Web サイトの他の関連記事を参照してください。