checkbox和radio的图标太接近了,应该radio是圆的checkbox是方的,这样才好区分嘛。
如上图所示,如果不做说明区分,未选择状态下根本区分不开radio和checkbox。
及时选中状态,区分度也不明显啊。
请问官方能够优化这个问题吗?或者提供mui.ttf文件的svg源文件我自己来修改。
圆形的复选框在未被选中的时候,确实跟单选按钮太像了,,,自己动手,丰衣足食:
<li class="mui-table-view-cell">
<div class="mui-checkbox mui-left mui-pull-left">
<label>全选</label>
<input name="checkbox1" type="checkbox" />
</div>
<div class="mui-pull-right">
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">上传</button>
</div>
</li>
.mui-checkbox input[type=checkbox]:before {
content: '\e413';
}
.mui-checkbox input[type=checkbox]:checked:before {
content: '\e443';
}
.mui-checkbox.mui-left input[type=checkbox]{
left: 0px;
}
.mui-checkbox.mui-left label, .mui-radio.mui-left label {
margin-top: 10px;
padding-right: 15px;
padding-left: 30px;
}
.mui-table-view-cell {
position: relative;
overflow: hidden;
padding: 11px 15px;
-webkit-touch-callout: none;
}
shelyn (作者)
感谢官方2位同学的回复。
@DCloud_MUI_CHB 目前来说,只是希望有一个方形的checkbox,为这个去增加一个字体文件感觉有单臃肿。
@DCloud_heavensoft 我也觉得方形的checkbox还是有用。
我这里的情况是,做一套题库系统,有的题是单选,有的题是多选,所以希望能够直观的看到单选题和多选题的区别。
mui的ui设计理念:以iOS 7为基础,借鉴部分Android系统特有控件;
之前我们同时提供了圆形的checkbox和方形的checkbox,后来发现iOS上的圆形checkbox,大家都已习惯,因此就删掉了方形的checkbox;
你可以通过自定义图标的方式,覆盖checkbox;参考:mui如何增加自定义icon图标
目前mui使用的svg尚未整理,后续整理完毕后,可以开源出去。
1***@qq.com
你那个未上传,已上传 全部如何在一行显示 的呢
2018-01-19 22:28
skysowe
<div class="mui-input-row">
<div class="mui-radio mui-pull-left">
<label>未上传</label>
<input name="radio1" type="radio" checked="checked" />
</div>
<div class="mui-radio mui-pull-left">
<label>已上传</label>
<input name="radio1" type="radio" />
</div>
<div class="mui-radio mui-pull-left">
<label>全部</label>
<input name="radio1" type="radio" />
</div>
</div>
2018-01-27 09:04
l***@163.com
原来已经有e443 e413图标啊,我还费劲的自己找了扩展字体。感谢分享!
2018-09-06 22:44