2011-05-13 54 views
0

我有一個自定義複選框。複選框問題(可選區域偏移量)

我遇到的問題是,懸停在實際的圖像區域(這是可以點擊是失控)如果你嘗試一下,你會看到,..螢火蟲元素檢查員是最好的。

這裏的小提琴:http://jsfiddle.net/ozzy/YsbBM/1/雖然sprite不能正常顯示。

實際演示在這裏:http://sitehelp.com.au/demos/checkbox/

這裏的js:

function setCheckboxDisplay(el){ 
    var objWrap; 
    objWrap = document.getElementById(el.id+"Wrap"); 
    if(el) { 
     if(el.checked) objWrap.className = "styledCheckboxWrap wrapChecked"; 
     else objWrap.className = "styledCheckboxWrap"; 
    } 
} 

此處的CSS:

. styledCheckbox 
    { 
    line-height:20px; 
    height:20px; 
     width:20px; 
    filter:alpha(opacity=0.0); 
    opacity:0.0; 
    outline:0 
    } 


. styledCheckboxWrap 
{ 
    position:relative; 
    float:left; 
    background:url("/images/cbox.png") no-repeat top left; 
    width:20px; 
    height:20px; 
    margin:3px; 
} 
. wrapChecked{background-position: 0px -20px} 
. checkboxLabel{ 
    float:left; 
    cursor:pointer 
} 

HTML瀏覽:

<span id="checkboxWrap" class="styledCheckboxWrap"><input type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span> 

複選框1

問題是複選框懸停isnt點,複選框的寬度和高度。所以你必須摸索周圍試圖獲得點擊該死的東西的確切位置。 不知道我做了什麼錯,但它正在修理它。笑

任何建議請

+0

感謝@minitech整理起來 – 422 2011-05-13 01:47:39

回答

1

爲了您的jsfiddle問題,改變下拉,上面寫着「onDomReady」改爲「無包(頭)」,它會工作。至於實際問題...你的意思是你不能點擊標籤來檢查框,只有框?因爲這個複選框對我來說是完美的...

+0

更新了小提琴是的完美作品。但是,如果您查看我使用完全相同的代碼發佈的網站鏈接,則問題非常普遍。當您將鼠標放在圖標上時(複選框),對於複選框的確切大小而言,它不可點擊,它的相關性很差。沒有血腥的想法爲什麼。點擊它,然後沿着頂部邊緣嘗試去除它等等。它出於某種原因剛好不對齊。 – 422 2011-05-13 01:54:02

+1

真的嗎?在谷歌瀏覽器中正常使用,您使用的是哪種瀏覽器? – Ryan 2011-05-13 01:55:37

+1

複選框對我來說工作正常。 – breezy 2011-05-13 01:56:24