2

私がする必要があるのは、ラジオボタンの外観を画像に置き換えることです。これは jQuery で簡単に実現できますが、この場合は CSS のみで行う必要があります。それを行う方法はありますか？ここに私のHTMLがあります：

<div class="radio-buttons">
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="cheetah" value="" />
    </div>
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="horse" value="" />
    </div>
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="lion" value="" />
    </div>
</div>

ラジオボタンにスタイルを適用しようとしましbackground-image:たが、もちろんうまくいきませんでした。次に を追加しました。ボタンに<span>スタイルを設定できるかどうか疑問に思っています。これは正しい方法ですか、それとも完全に間違った方向に進んでいますか? そして、それはCSSだけで実現できますか?display: noneinput:checked<span>background-image:

編集: 必要に応じて、ラジオ ボタンをチェックボックスに変更できます。

4

3 に答える 3

4

ドミニクが言ったように、それはこれを達成するためのほとんどの方法です。彼のコードは特定のケース向けである可能性があり、似ているがそれよりもはるかに単純なものを見つけました。写真のリストを作成する必要があり、写真をクリックすると、クリックされた写真が表示されますが、リストの後のセクションに大きく表示されます。それが私とうまくいかなかった理由です。ただし、最初にすべてを説明してから、コードを貼り付けます。

ドミニク コードは、 が の隣にある場合にのみlabel機能しますradio-button。<label>から分離されているため、うまくいきませんでしたradio-buttons。の後ろにラベルが<ul>あり、ラジオボタンが入っています。そのようには機能しないため、それぞれの隣に別の同じものを追加する必要がありました。これで、1 つのラジオ ボタンに対して 2 つのラベルが作成されました。これが私のコード全体です。css のスペースを節約するためだけに、ul ラベルをインラインでスタイルしました。私は bg-color で作ったので誰か試してみたい方は... bg-image でも問題なく動作します<div><ul><label>radio-button

HTML:

<div class="shell">
    <form>
        <ul>
            <li><label class="label" for="cheetah" style="background-color: white"></label></li>
            <li><label class="label" for="horse" style="background-color: yellow"></label></li>
            <li><label class="label" for="lion" style="background-color: green"></label></li>
            <li><label class="label" for="squirrel" style="background-color: red"></label></li>
            <li><label class="label" for="tiger" style="background-color: purple"></label></li>
            <li><label class="label" for="bear" style="background-color: black"></label></li>
        </ul>

        <div class="radio-buttons">
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="cheetah" value="" />
                <label class="label" for="cheetah" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="horse" value="" />
                <label class="label" for="horse" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="lion" value="" />
                <label class="label" for="lion" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="squirrel" value="" />
                <label class="label" for="squirrel"></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="tiger" value="" />
                <label class="label" for="tiger"></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="bear" value="" />
                <label class="label" for="bear" ></label>
            </div>
        </div>
    </form>
</div>

CSS:

*{ margin: 0; padding: 0; }

.shell { width: 1000px; margin: 0 auto; }

ul { height: 150px; list-style: none; padding-bottom: 50px;  }

ul li {
    float: left; 
    border: 1px solid #666;
    margin-right: 14px; 
} 
ul li label {
    display: block; 
    width: 150px;
    height: 150px;
    cursor: pointer;
}

ul label {
    display: inline;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]:checked + label.label {
    border: 1px  solid red;
    background-repeat: no-repeat;
    display: inline-block;
    height: 500px;
    width: 500px;
}
input[type="radio"]:checked + label[for="cheetah"] {
    background-color: white
}
input[type="radio"]:checked + label[for="horse"] {
    background-color: yellow
}
input[type="radio"]:checked + label[for="lion"] {
    background-color: green
}
input[type="radio"]:checked + label[for="squirrel"] {
    background-color: blue
}
input[type="radio"]:checked + label[for="tiger"] {
    background-color: purple
}
input[type="radio"]:checked + label[for="bear"] {
    background-color: black
}
于 2013-01-31T10:32:21.320 に答える
1

ブロックレベルの HTML 要素には、いくつかの制限があります。

They must be separated from surrounding text by blank lines.
The begin and end tags of the outermost block element must not be indented.
Markdown can't be used within HTML blocks.
于 2013-05-04T12:12:23.857 に答える
1

コメントで提供したリンクで説明されているように、次の html を使用できます。

<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />

次のようなcssと一緒に：

.regular-radio {
display: none;
}

.regular-radio + label {
-webkit-appearance: none;
background-image: url("unchecked.png");
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}

.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background-image: url("checked.png");
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}

.regular-radio:checked + label {
background-image: url("checked.png");
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
于 2013-01-31T09:35:07.607 に答える