How to use android checkbox and radio button in OnsenUI ios7 theme

374 Views Asked by At

I like onsen iOS7 theme but the iOS theme checkboxes and radio buttons are not really intuitive. I want to use android themes checkboxes and radio buttons instead. I tried copying android theme css from firebug console to a new css file to override ios styles but it's not working correctly. Can somebody help me with this. I am using the sample code below

<label class="topcoat-checkbox">
  <input type="checkbox">
  <div class="topcoat-checkbox__checkmark"></div>
  OFF
</label>
1

There are 1 best solutions below

0
On

Put this in your app.css or any css file after ios7.css

.topcoat-checkbox__checkmark:before {       
    width: 18px !important;
    height: 19px !important;
    background: rgba(0, 0, 0, 0) !important;    
    border: 1px solid #535353 !important;   
    border-radius: 0 !important;    
}

input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
    opacity: 1;
}

.topcoat-checkbox__checkmark:after {
    top: -1px !important;
    left: 2px !important;
    opacity: 0;
    width: 14px !important;
    height: 6px !important;
    background: rgba(0, 0, 0, 0) !important;
    border: 1px solid #09C !important;
    border-width: 4px !important;
    border-top: none !important;
    border-right: none !important;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;