Open whforit opened 8 years ago
在目前版本radio 与 checkbox样式一样,个人觉得不合理,与不符合ios ui风格。framework7 radio的勾勾图标 在item的右边: 希望sui新版本可以更新下radio的样式。我从framework7 中把样式抠了出来,直接将label-checkbox改为label-radio就可以使用: label.label-radio { cursor: pointer; } label.label-radio input[type="radio"] { display: none; } label.label-radio input[type="radio"] ~ .item-inner { padding-right: 35px; } label.label-radio input[type="radio"]:checked ~ .item-inner { background: no-repeat center; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E"); background-position: 90% center; background-position: -webkit-calc(100% - 15px) center; background-position: calc(100% - 15px) center; -webkit-background-size: 13px 10px; background-size: 13px 10px; } label.label-radio { -webkit-transition-duration: 300ms; transition-duration: 300ms; }
label.label-radio { cursor: pointer; } label.label-radio input[type="radio"] { display: none; } label.label-radio input[type="radio"] ~ .item-inner { padding-right: 35px; } label.label-radio input[type="radio"]:checked ~ .item-inner { background: no-repeat center; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E"); background-position: 90% center; background-position: -webkit-calc(100% - 15px) center; background-position: calc(100% - 15px) center; -webkit-background-size: 13px 10px; background-size: 13px 10px; } label.label-radio { -webkit-transition-duration: 300ms; transition-duration: 300ms; }
需要的可以复制过去临时用下,sui还是用cdn的
我也在找radio样式,原来真的没有。
@jimmy0766 我已经提供解决方法啦
在目前版本radio 与 checkbox样式一样,个人觉得不合理,与不符合ios ui风格。framework7 radio的勾勾图标 在item的右边: 希望sui新版本可以更新下radio的样式。我从framework7 中把样式抠了出来,直接将label-checkbox改为label-radio就可以使用:
label.label-radio { cursor: pointer; } label.label-radio input[type="radio"] { display: none; } label.label-radio input[type="radio"] ~ .item-inner { padding-right: 35px; } label.label-radio input[type="radio"]:checked ~ .item-inner { background: no-repeat center; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E"); background-position: 90% center; background-position: -webkit-calc(100% - 15px) center; background-position: calc(100% - 15px) center; -webkit-background-size: 13px 10px; background-size: 13px 10px; } label.label-radio { -webkit-transition-duration: 300ms; transition-duration: 300ms; }