1 2.mblCheckBox { 3 position: relative; 4 margin: -0.5em 3px 0.3em 4px; 5 width: 1em; 6 height: 1em; 7 border-style: outset; 8 border-width: 1px; 9 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2)); 10 background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%); 11 font: inherit; 12 cursor: pointer; 13 -webkit-appearance: none; 14 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 15 -webkit-transform: translateY(0.45em); 16 transform: translateY(0.45em); 17 border: 1px solid #c0c0c0; 18 border-bottom-color: #9b9b9b; 19 border-radius: 0; 20} 21.mblCheckBoxSelected { 22 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999)); 23 background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%); 24} 25.mblCheckBoxChecked, 26.mblCheckBox:checked { 27 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2)); 28 background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%); 29} 30.mblCheckBoxChecked::after, 31.mblCheckBox:checked::after { 32 position: absolute; 33 content: ""; 34 width: 0.3em; 35 height: 0.6em; 36 top: 0; 37 left: 0.3em; 38 border-width: 0.15em; 39 border-style: none solid solid none; 40 -webkit-transform: rotate(45deg); 41 transform: rotate(45deg); 42 -webkit-transform-origin: 50% 50%; 43 transform-origin: 50% 50%; 44 border-color: #000000; 45} 46.mblCheckBoxChecked.mblCheckBoxSelected, 47.mblCheckBox:checked.mblCheckBoxSelected { 48 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999)); 49 background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%); 50} 51.mblCheckBoxChecked.mblCheckBoxSelected::after, 52.mblCheckBox:checked.mblCheckBoxSelected::after { 53 border-color: #ffffff; 54} 55