web-dev-qa-db-ja.com

クリック後のCSS変更ボタンのスタイル

クリック後にボタンのスタイルをcssで変更する方法があるのではないかと考えていたので、element:activeではありません。ありがとう！

csscss3buttonstyling
19
JohnyNich

純粋なCSSオプションを探している場合は、：focus疑似クラスを使用してみてください。

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}
18
Mark

各リンクには、link、hover、active、focus、およびvisitedの5つの異なる状態があります。

Linkは通常の外観、hoverはマウスオーバー時、activeはクリックされたときの状態、focusはアクティブに続き、visitedは現在の状態です。最近クリックしたリンクのフォーカスを外すと終了します。

focusまたはvisitedのいずれかで異なるスタイルを実現したいと思うので、次のCSSを追加できます。

a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }

トラブルを引き起こさないためのCSSの推奨順序は次のとおりです。

a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

Webブラウザーの開発者ツールを使用して、次のような要素の状態を強制することができます（Chrome->開発者ツール/要素の検査->スタイル->フィルター：hov）： Chromeの状態を強制する開発者ツール

20
MrD

ボタンのコードは何ですか？タグの場合、これを行うことができます：

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}
<a href="#">A button</a>

または、次のようにjQueryを使用してクリック時にクラスを追加できます。

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});
.button-clicked {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
4
CalvT

ボタンのフォーカスの概要を確認してください。

button:focus {
    outline: blue auto 5px; 
}

お持ちの場合は、noneに設定してください。

4
Matúš Šťastný

ボタンのアクティブおよびフォーカスの擬似要素を選択するだけでCSSを実行できます。

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

Codepenを参照してください： http://codepen.io/fennefoss/pen/Bpqdqx

背景色を変更する簡単なjQueryクリック関数を作成することもできます。

HTML：

<button class="js-click">Click me!</button>

CSS：

button {
  background: none;
}

JavaScript：

  $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });

このcodepenを確認してください： http://codepen.io/fennefoss/pen/pRxrVG

2
Mikkel Fennefoss

ボタンが<a>要素の場合、:visitedセレクターを使用できます。

ただし、制限はありますが、変更のみが可能です。

  • 色
  • 背景色
  • border-color（およびそのサブプロパティ）
  • アウトラインカラー
  • 塗りつぶしとストロークのプロパティの色の部分

:visitedの再訪に関するこの記事 は読みませんでしたが、賢い人がハッキングする方法を見つけたかもしれません。

1
Paul van den Dool