チェックボックスのカスタム写真はありますか？

トグルボタンとしてチェックボックスを表示したいと思います。しかし、私はCCSでそれに私のカスタム写真を適用することはできません - まだチェックボックスが描画されます。どのようにこのタスクを満たすために？チェックボックスのカスタム写真はありますか？

マイCSS：

input[type=checkbox]#settingsbutton { 
    border-style: none; 
    background-color: transparent; 
    width: 42px; 
    height: 40px; 
    display: block; 
} 

input[type=checkbox].button-settings { 
    background-image: url("images/button-settings-normal.png"); 
} 

input[type=checkbox].button-settings:active { 
    background-image: url("images/button-settings-normal.png"); 
} 

input[type=checkbox].button-settings:hover { 
    background-image: url("images/button-settings-hover.png"); 
} 

input[type=checkbox].button-settings:active { 
    background-image: url("images/button-settings-pressed.png"); 
}

マイHTML：

<body> 

<input type="checkbox" id="settingsbutton" class="button-settings"/> 

</body>

出典

2011-12-29 Dims

あなたはそれが純粋css溶液でいたいなら、あなたは、あなたのマークアップでlabelを追加する必要があります。これは、このLKE trick &書き込みます：

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

：

input[type=checkbox]{ 
    display:none; 
} 
input[type=checkbox] + label{ 
    height: 40px; 
     width: 42px; 
} 
body:not(#foo) input[type=checkbox]:checked + label{ 
    background-image: url("images/button-settings-normal.png"); 
} 

body:not(#foo) input[type=checkbox] + label{ 
    background-position:0 -46px; /* as per your requirement*/ 
    height: 40px; 
}

<body> 

<input type="checkbox" id="settingsbutton" class="button-settings"/> 
<label for="settingsbutton"></label> 

</body>

HTMLは、これらの記事を読みますhttp://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

ソリューションは、チェックボックスを非表示にしてcheck-をエミュレートすることの代わりに、スタイル付きの要素を、加えることを含む：

しかし、スタイリングチェックボックスのために、このリンクを参照してください

出典

2011-12-29 11:58:55 sandeep

このソリューションをお試しください：チェックボックスをNONE'を？表示されていない場合は、クリックできません。あなたのリンクは、不透明度をゼロに設定することを示唆しています。 – Mikaveli

チェックボックスを有効にするラベルをクリックすることができます – Prodikl

の下IE8 &では動作していませんボックスの動作。

出典

2011-12-29 12:01:59 techfoobar

はい、このテキストを見ましたが、CSSのみを使用できるかどうか疑問に思っていました – Dims

ラベルにいくつかのテキストを持っている場合、リンクは本当に便利ですが、あなたは `ディスプレイを使用する理由私は理解していない

input[type=checkbox]{ 
    display:none; 
} 
input[type=checkbox] + label:before{ 
    height: 42px; 
    width: 42px; 
    content: url("../img/chk.jpg"); 
} 
body input[type=checkbox]:checked + label:before{ 
    content: url("../img/chk_checked.jpg"); 
}

出典

2016-10-27 10:22:47

チェックボックスのカスタム写真はありますか？

答えて

関連する問題