iphone style case à cocher

Question

Je veux créer une case à cocher comme!

<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> 

mais quand j'augmente la largeur de la case à cocher. Ça ne marche pas. Voici mon code jsfiddle

Answer 1

jsfiddle.net/RUvhw/3/ 

Je suppose que vous n'avez pas fait vous-même? il suffit de jouer un peu avec les valeurs, jusqu'à obtenir les tailles désirées ...

Answer 2

Vous devez modifier les valeurs de largeur et de gauche. J'ai fourchu et mis à jour votre question/réponse.

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; 
}