Question

我喜欢onsen iOS7主题，但iOS主题复选框和单选按钮并不是非常直观。我想使用android主题复选框和单选按钮。我尝试将android主题css从firebug控制台复制到新的css文件以覆盖ios样式但它无法正常工作。有人可以帮我这个。我正在使用下面的示例代码

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

Answer 1

将此内容放入 app.css 或ios7.css之后的任何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;

如何在OnsenUI ios7主题中使用android复选框和单选按钮

1 个答案: