I think the following codes would be useful when I want to make iDangerous swiper responsive to toggle mode between vertical and horizontal.
CSS3 :
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
#todo-list li .toggle { text-align: center; width: 40px; /* auto, since non-WebKit browsers doesn't support input styling */ height: auto; position: absolute; top: 0; bottom: 0; margin: auto 0; border: none; /* Mobile Safari */ -webkit-appearance: none; /*-moz-appearance: none;*/ -ms-appearance: none; -o-appearance: none; appearance: none; } #todo-list li .toggle:after { content: '✔'; line-height: 43px; /* 40 + a couple of pixels visual adjustment */ font-size: 20px; color: #d9d9d9; text-shadow: 0 -1px 0 #bfbfbf; } #todo-list li .toggle:checked:after { color: red; text-shadow: 0 1px 0 #669991; bottom: 1px; position: relative; }## Todo: add pic