☰

CSS で onclick 効果を持たせることはできますか? 質問する

tag-icon • tag-icon html css onclick
CSS で onclick 効果を持たせることはできますか? 質問する

クリックすると変更したい画像要素があります。

<img id="btnLeft">

これは機能します:

#btnLeft:hover {
    width: 70px;
    height: 74px;
}

しかし、私が必要としているのは次のものです:

#btnLeft:onclick {
    width: 70px;
    height: 74px;
}

onclickしかし、明らかに動作しません。CSSで動作させることは (つまり、JavaScript を使用せずに)可能ですか?

ベストアンサー1

CSSのみを使用して実際のクリックイベントをシミュレートする最良の方法（実際には唯一の方法*）は、要素にマウスを置いたり、要素をアクティブにしたりするのではなく、マウスアップ）の1つは、チェックボックスハックを使うことです。labelに<input type="checkbox">ラベルのfor=""属性を介して要素。

この機能には幅広いブラウザのサポート(:checked疑似クラスは IE9+ です)。

<input>のID属性とそれに付随する<label>の属性に同じ値を適用するfor=""と、ブラウザにクリック時にラベルのスタイルを変更するように指示できます。:checkedラベルをクリックすると、「関連付けられている」のチェックがオンまたはオフになるので、疑似クラスになります<input type="checkbox">。

:active* IE7+ のまたは:focus疑似クラスを介して「選択」イベントをシミュレートできます(たとえば、通常は幅の広いボタンの場合、 :50pxの間に幅を変更できます)。ただし、これらは真の「クリック」イベントではありません。これらは、要素が選択されている間 (キーボードで入力するなど) ずっと「ライブ」であり、通常は でアクションを起動する真のクリック イベントとは少し異なります。active#btnControl:active { width: 75px; }TabmouseUp

チェックボックス ハックの基本的なデモ (求めている基本的なコード構造):

label {
    display: block;
    background: lightgrey;
    width: 100px;
    height: 100px;
}

#demo:checked + label {
    background: blue;
    color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>

ここでは、マークアップの入力の直後にラベルを配置しています。これにより、隣接兄弟セレクター(+キー) チェックボックスの直後のラベルのみを選択します#demo。:checked疑似クラスはチェックボックスに適用されるため、#demo:checked + labelチェックボックスがオンになっている場合にのみ適用されます。

クリック時に画像のサイズを変更するデモです。これがあなたが求めているものです:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/300" id="btnLeft" /></label>

そうは言っても、悪い知らせもあります。ラベルは一度に1つのフォームコントロールに関連付けられますつまり、タグ内にボタンを配置するだけでは終わりませ<label></label>ん。ただし、CSS を使用すると、ラベルの外観と動作を HTML ボタンの外観と動作にかなり近づけることができます。

ご要望以上のボタンクリック効果を模倣するデモ:

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 20px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:20px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}


.btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

このデモの CSS のほとんどは、ラベル要素のスタイル設定のみを目的としています。実際にボタンは必要なく、古い要素で十分な場合は、上記の 2 番目のデモと同様に、このデモのスタイルをほぼすべて削除できます。

おすすめ記事