web-dev-qa-db-ja.com

チェックボックスに背景画像を使用する

チェックされていない場合は、取得した1つの画像を使用し、チェックされている場合は別の画像を使用するように、いくつかのチェックボックスを設定しようとしています。これが私の現在のチェックボックスです。

<input type="checkbox" name="fordCheckBox" value="Ford">

各チェックボックスの背景画像を設定するために、次のCSSも使用しています。

input[type=checkbox][name=fordCheckBox] {
        background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
        height: 25px;
        width: 25px;
        background-size: 50%;
    }

    input[type=checkbox][name=fordCheckBox]:checked {
        background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
        height: 25px;
        width: 25px;
        background-size: 50%;
    }

私の JSFiddleの例 を見るとわかるように、アイコンは正しいサイズですが、背景画像を本来のように設定することはありません。助言がありますか？

htmlcsscheckbox
7
tylerbhughes

ラベルだけでできます

   input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 0 0 0 0px;
    background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
    height: 125px;
    width: 125px;;
    background-size: 50%;
}

input[type=checkbox]:checked + label {
    background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
    height: 125px;
    width: 125px;
    display:inline-block;
    background-size: 50%;
}

HTML

<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford">
<label for="Ford"></label>

更新されたjsfiddleを確認してください https://jsfiddle.net/s4nr6q3d/

9
Malith

実際にチェックボックスを直接変更してはいけません。一部のブラウザは常にデフォルトのチェックボックスを表示します。通常は、入力IDフィールドにリンクされているチェックボックスのラベルを追加することによって行われます。例えば：

<input type='checkbox' id='x' name='fordCheckBox'>
<label for='x'></label>

次に、チェックボックスをdisplay: noneに設定すると、実際のCSSがラベルに適用されます。セレクタは次のようになります。input[type=checkbox]:checked + label

すべてを説明し、段階的に説明するのに役立つこの記事を見つけました。

http://webdesign.tutsplus.com/tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-895

2
jtmingus

私はこのCSSを使用しました。このCSSでは、チェックボックスがチェックされている場合、チェックボックスにチェック画像が配置されます。また、デフォルトでチェックボックスのサイズ、色、境界線を変更します。

    input[type='checkbox'] {
        -webkit-appearance: none;
        width: 30px;
        height: 30px;
        background: white;
        border-radius: 5px;
        border: 2px solid #555;
        vertical-align:middle;
    }

    input[type='checkbox']:checked {
        background-image: url("Images/tick-sm.png");
        background-size: 90%;
        background-position: right center;
        background-repeat: no-repeat;
   }

「Images/tick-sm.png」を独自の画像に置き換えます。

チェックされていない状態でも別の背景が必要な場合は、2番目のブロックの同じ内容を最初のブロックに追加し、画像を置き換えます。

0
Saadat