0

ドロップダウンボックスなど、ラジオボタンのようにすべてのアイテムを一度に表示するフォーム要素が必要ですが、その横に円はありません。たとえば、これは私が欲しいものの簡単な写真です

ここに画像の説明を入力

divの作成方法などはすでに知っています。クリックする方法を知る必要があるだけで、自動的に黄色に変わり、「選択」されます。JS フリーであることができれば、それは大いに役立つでしょう。

4

2 に答える 2

3

ラジオボタンは引き続き使用できますが、それらをラベルにラップし、入力自体を非表示にします。jsFiddleの例を次に示します。

HTML:

<label>
    <input type="radio" name="item">
    <img src="http://lorempixel.com/140/140/abstract">
    <div>Some text</div>
</label>

CSS:

label {
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}
div {
    background: cyan;
    line-height: 40px;
}
input[type=radio] {
    position: absolute;
    top: -100px;
}
input[type=radio]:checked ~ div {
    background: lime;
}

また、ターゲットを絞ったブラウザーの:checkedサポートを検討することもできます。たとえば、IE8 以下は、このセレクターをネイティブにサポートしていません。

于 2013-04-14T06:41:15.777 に答える
2

JavaScript などを使用しないと少し制限がありますが、:target 疑似クラスを試すことができます。この jsfiddle を見てください: http://jsfiddle.net/rkCSX/

于 2013-04-14T06:20:15.370 に答える