.mblToggleButton { position: relative; padding: 0 10px 0 25px; height: 29px; border-width: 1px 1px 1px 1px; border-style: outset; background-image: -webkit-gradient(linear, left top, left bottom, from(#f7fbf7), to(#cecfd6), color-stop(0.5, #ced3ce)); font-family: Helvetica; line-height: 29px; cursor: pointer; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); border-color: #9cacc0; border-radius: 6px; font-size: 16px; color: black; } .mblToggleButton:disabled { border-color: grey; background-image: none; color: grey; cursor: default; } .mblToggleButtonSelected { background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); color: white; } .mblToggleButtonChecked { background-image: -webkit-gradient(linear, left top, left bottom, from(#f7fbf7), to(#cecfd6), color-stop(0.5, #ced3ce)); color: black; } .mblToggleButtonChecked:after { position: absolute; content: ""; top: 6px; left: 7px; width: 5px; height: 10px; border-width: 2px; border-style: none solid solid none; -webkit-transform: rotate(45deg) skew(10deg); -webkit-transform-origin: 50% 50%; border-color: #0851ad; } .mblToggleButtonChecked.mblToggleButtonSelected { background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); color: white; } .mblToggleButtonChecked.mblToggleButtonSelected:after { border-color: white; }