チェックボックスをトグルボタンとして表示したいのですが。しかし、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>
純粋なcss
ソリューションを使用したい場合は、マークアップにlabel
を追加する必要があります。これはtrick
であり、次のように記述します。
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;
}
[〜#〜] html [〜#〜]
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>
</body>
これらの記事を読んでください:
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
ただし、IE8
以下では機能しません
チェックボックスのスタイル設定については、次のリンクを参照してください: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
この解決策には、チェックボックスを非表示にし、その代わりにスタイル付き要素を追加することが含まれます。これにより、チェックボックスの動作がエミュレートされます。
ラベルにテキストがある場合は、このソリューションを試してください
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");
}