yelog / layui-select-multiple

为 layui 扩展的 下拉多选select
http://yelog.org/layui-select-multiple/
172 stars 144 forks source link

优化关闭按钮的样式 #2

Closed davinma closed 6 years ago

davinma commented 6 years ago

原本的关闭按钮是个背景图,某些情况下感觉显示有些模糊,把图片改成纯 CSS 的了(利用 CSS 伪类)。

原本是:

.multiSelect a i{ float:left; display:block; margin:2px 0 0 2px; border-radius:2px; width:8px; height:8px; background:url(close.png) no-repeat center; background-size:65%; padding:4px;}

改为:

.multiSelect a i {float:left;display:block;margin:2px 0 0 2px;border-radius:2px;width:8px;height:8px;padding:4px;position:relative;-webkit-transition:all .3s;transition:all .3s}
.multiSelect a i:before, .multiSelect a i:after {position:absolute;left:8px;top:2px;content:'';height:12px;width:1px;background-color:#fff}
.multiSelect a i:before {-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.multiSelect a i:after {-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
yelog commented 6 years ago

不错不错,已经更新了代码