スタイリングチェックボックス

チェックボックスの代わりに画像を挿入しようとしています。使用しているコードは次のとおりです。スタイリングチェックボックス

<html> 
<head> 
<style> 
.bl { 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3)); 
width: 90%; 
height:30px; 
border-radius: 5px; 
margin-right:auto; 
margin-left:auto; 
margin-top:10px; 
margin-bottom:10px; 
} 
p 
{ 
font-family:"Times New Roman"; 
font-size:10px; 
} 

checkbox 
{ 
    width: 75px; 
    height: 75px; 
    padding: 0 5px 0 0; 
    background: url(images/Green_tick.png) no-repeat; 
    display: block; 
    clear: left; 
    float: left; 
} 

.checked { 
    position: absolute; 
    width: 200px; 
    height: 21px; 
    padding: 0 24px 0 8px; 
    color: #fff; 
    font: 12px/21px arial,sans-serif; 
    background: url(images/Green_tick.png) no-repeat; 
    overflow: hidden; 
} 

</style> 
</head> 

<body> 
<script> 
function Checked(id) 
{ 
if(id.checked==1) 
{ 
    alert("Checked"); 
} 
else 
{ 
    alert("You didn't check it! Let me check it for you.") 
     id.checked = 1; 

} 
} 

</script> 

<div class="main_menu"> 
    <a id='menu' href="javascript:" onclick="loadMenuPage();"></a> 
</div> 
<p> 
All verifications required for QR7 can be uploaded here. Any item which still requires verification is 
marked in red until picture has been attached. 
</p> 
<div class="bl"> 
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input> 
</div> 
<div class="bl"> 
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input> 
</div> 
<div class="bl"> 
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input> 
</div> 
<div class="bl"> 
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input> 
</div> 

</body> 
</html>

私はどのように達成するのですか？今のところ、私はチェックボックスに通常のティックを取得します。

ありがとうございます。

出典

2012-02-02 Khush

CSSを使用したスタイリングチェックボックスは悪夢であり、あなたが望む外観を達成することは決してありません。 jQueryプラグインを使用してみてください。ほとんどの人は、入力を可視画面からはずしてチェックボックスを非表示にし、必要に応じて編集できる背景画像でスパン置換を使用します。以下のような何か： http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

はまた、このスレッドをチェックしてください。 Pure CSS Checkbox Image replacement

出典

2012-02-02 09:24:40 Deadkat7

この投稿は古いですが、これは私がお勧めするものである。このようなあなたのチェックボックスに

准ラベル：

<input type="checkbox" value="1" id="c1" /> 
<label class="check" for="c1"></label>

を

cssで表示しないチェックボックス：

.checkboxes input[type=checkbox]{ 
    display:none 
}

ラベルのスタイルを自由に変更できます。私はpersonnaliseチェックボックスを使用する方法を完全に実演するシンプルなjsfiddleを作成しました。この例ではバックグラウンドカラーを使用していますが、代わりにバックグラウンドイメージを簡単に使用できます。

Hereは、私は、チェックボックス、ラジオをカスタマイズする方法について（http://blog.felixhagspiel.de/index.php/posts/custom-inputs）[より詳細なチュートリアルを書きました] jsfiddle

出典

2013-09-24 20:42:29 morgul

ですオン/オフスイッチを作成するだけでなく、基本的にはあなたのアプローチのように同じです。 –

スタイリングチェックボックス

答えて

関連する問題