使用CSS切換按鈕

Question

我設計了一個水平切換按鈕，我試圖通過垂直切換使它垂直。

你可以看我的CSS演示Horizontal Toggle button CSS Code Demo有人可以指出我需要做些什麼才能使它垂直嗎？我是新來的CSS和HTML

Refer to my code at jsfiddle 

Answer 1

與follwing取代你的CSS ..

http://jsfiddle.net/ZX6hF/8/

或

http://jsfiddle.net/ZX6hF/9/

html{ height:100%; } 
body{ 
    font:14px/1 Arial; 
    text-align:center; 
    color:#333; 
    background-color:#EEE; 
    height:100%; 
    background:#DDD; 
} 
body::after{ content:''; display:inline-block; height:100%; vertical-align:middle; } 

*{ margin:0; padding:0; } 

      ul{ margin:0; padding:0; list-style:none; display:inline-block; width:300px; text-align:left; vertical-align:middle; } 
       ul li{ line-height:30px; overflow:hidden; padding:4px 0; } 

/* Actual code goes here */ 
     .togglebox input{ display:none; } 
      .togglebox{ display:inline-block; border:1px solid #BBB; width:40px; height:90px; position:relative; border-radius:20px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; } 
      .togglebox label{ width:40px; height:100%; line-height:200%; border-radius:0.4em; position:absolute; top:0; left:0; z-index:1; font-size:1.1em; cursor:pointer; -webkit-transition:height 0.12s; -moz-transition:height 0.12s; transition:height 0.12s; } 
      .togglebox span{ position:absolute; top:-110px; } 

      .togglebox label::before{ content:'ON'; width:40px; height:50px; float:left; margin-top:00px; padding-top:20px; padding-right:13px; text-align:center; background:#13E27F; text-shadow:0 -1px 0px #093B5C; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; } 

      .togglebox label b{ display:block; height:40px; width:40px; float:left; position:relative; z-index:1; border:1px solid #AAA; background:#F6F6F6; box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:20px; margin-top:-20px; margin-left:-1px; } 
      .togglebox label:hover b{ background:#E5E5E5; } 
       .togglebox label::after{ content:'OFF'; width:40px; float:left;height:50px; padding-top:20px; padding-left:0px; text-align:center; background:#E70A25; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; margin-top:-20px;} 
      .togglebox input:checked ~ label{ top:-50px; } 

檢查樣本在這裏.. !!! click

Answer 2

嘗試添加此：

#togglebox { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
}