Apply below mentioned css to implement toggle field similar to IOS.
Code:
.x-toggle .x-thumb{
position:relative;
margin:0 0 0 0;
text-align:center;
font-size:1em;
font-weight :bold;
}
.x-toggle-on .x-thumb{
color:white;
text-shadow:#062547 0 -1px 0;
height: 2em;
}
.x-toggle-off .x-thumb{
color : #666;
text-shadow:#FFFFFF 0 1px 0;
}
.x-toggle.x-toggle-off .x-field-inner, .x-toggle.x-toggle-on .x-field-inner{
display: block;
border-radius: 4px;
border: #777 1px solid;
position: relative;
height: 2em;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #EBEBEB),color-stop(.8, #D6D6D6), color-stop(1,#A2A2A2));
-webkit-box-shadow:#CCC 0 0 2px;
}
.x-toggle-off .x-thumb::before, .x-toggle-on .x-thumb::before {
position: absolute;
min-width:2.2em;
width:100%;
top: 0em !important;
left: 0em !important;
-webkit-border-radius: 0.925em;
border-radius:3px;
-webkit-background-clip: padding;
background-clip: padding-box;
height:1.9em;
padding-top:0.3em;
}
.x-toggle-off .x-thumb::before{
content: "OFF";
}
.x-toggle-on .x-thumb::before{
content: "ON";
}
.x-toggle-off .x-thumb::before {
border:1px solid #E5E5E5;
background-color: white;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
background-image: linear-gradient(white,#A1A1A1 2%,#white);
-webkit-box-shadow:#222 0 0 3px;
}
.x-toggle-on .x-thumb::before {
border:1px solid #14539C;
background-color: #14539C;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background-image: linear-gradient(white,#14539C 2%,#3095C7);
-webkit-box-shadow:#05203F 0 0 3px
}
IOS ToggleField CSS
Reply With Quote
Originally Posted by RussellYermal
