스타일 지정 확인란

확인란 대신에 이미지를 삽입하려고합니다. 사용중인 코드는 다음과 같습니다.스타일 지정 확인란

<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 플러그인을 사용해보십시오. 대부분은 보이는 화면에서 입력을 배치하여 확인란을 숨기고 필요에 맞게 편집 할 수있는 배경 이미지로 스팬 대체를 사용합니다. 뭔가 같은 : 당신의 체크 박스에

준 레이블을 다음과 같이 :이 내가 제안 것입니다 Pure CSS Checkbox Image replacement

출처

2012-02-02 09:24:40 Deadkat7

이 게시물 오래지만 : http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

은 또한이 스레드를 확인

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

css로 숨기기 체크 박스 :

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

원하는대로 레이블의 스타일을 지정하십시오. Personnalise 체크 박스를 사용하는 방법을 완벽하게 보여주는 간단한 jsfiddle을 만들었습니다. 이 예제에서는 backgrond-color를 사용하지만 대신 배경 이미지를 쉽게 사용할 수 있습니다.

Here, 나는 체크 박스 및 라디오를 사용자 지정하는 방법에 대한 (http://blog.felixhagspiel.de/index.php/posts/custom-inputs)보다 깊이 자습서를 썼다]

출처

2013-09-24 20:42:29 morgul

jsfiddle입니다 on/off 스위치를 만들뿐만 아니라 기본적으로 사용자의 접근 방식과 동일합니다. –

스타일 지정 확인란

답변

관련 문제