iphone style複選框

Question

我想創建一個複選框！

<label id="sliderLabel"> 
    <input type="checkbox" /> 
    <span id="slider"> 
     <span id="sliderOn">SELECTED</span> 
     <span id="sliderOff">SELECT</span> 
     <span id="sliderBlock"></span> 
    </span> 
</label> 

但是當我增加複選框的寬度。它不工作。這裏是我的代碼jsfiddle

Answer 1

jsfiddle.net/RUvhw/3/ 

我假設你沒有自己做這個？你只需要稍微玩一下數值，直到你得到想要的尺寸...

Answer 2

你需要修改寬度和左值。我分叉並更新了你的問題/答案。

http://jsfiddle.net/Pfxe6/

p { 
    margin: 10px; 
} 

#sliderLabel { 
    border: 1px solid #a2a2a2; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;  
    border-radius: 3px; 
    cursor: pointer; 
    display: block; 
    height: 30px; 
    margin: 20px auto; 
    overflow: hidden; 
    position: relative; 
    width: 200px; 
} 
#sliderLabel input { 
    display: none; 
} 
#sliderLabel input:checked + #slider { 
    left: 0px; 
} 
#slider { 
    left: -100px; 
    position: absolute;; 
    top: 0px; 
    -moz-transition: left .25s ease-out; 
    -webkit-transition: left .25s ease-out; 
    -o-transition: left .25s ease-out; 
    transition: left .25s ease-out; 
} 
#sliderOn, #sliderBlock, #sliderOff { 
    display: block; 
    font-family: arial, verdana, sans-serif; 
    font-weight: bold; 
    height: 30px; 
    line-height: 30px; 
    position: absolute; 
    text-align: center; 
    top: 0px; 
} 
#sliderOn { 
    background: #3269aa; 
    background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3269aa), color-stop(100%,#82b3f4)); 
    background: -webkit-linear-gradient(top, #3269aa 0%,#82b3f4 100%); 
    background: -o-linear-gradient(top, #3269aa 0%,#82b3f4 100%); 
    background: -ms-linear-gradient(top, #3269aa 0%,#82b3f4 100%); 
    background: linear-gradient(top, #3269aa 0%,#82b3f4 100%); 
    color: white; 
    left: 0px; 
    width: 100px; 
} 
#sliderBlock { 
    background: #d9d9d8; 
    background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9d9d8), color-stop(100%,#fcfcfc)); 
    background: -webkit-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); 
    background: -o-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); 
    background: -ms-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); 
    background: linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); 
    border: 1px solid #a2a2a2; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radisu: 3px; 
    height: 28px; 
    left: 100px; 
    width: 100px; 
} 
#sliderOff { 
    background: #f2f3f2; 
    background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b8c8b), color-stop(50%,#f2f3f2)); 
    background: -webkit-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); 
    background: -o-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); 
    background: -ms-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); 
    background: linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); 
    color: #8b8b8b; 
    left: 200px; 
    width: 100px; 
}