3,问题解决办法
由于我使用的是iOS皮肤样式(framework7.ios.min.css),这里面定义的.searchbar
input[type="search"]的background-image在Android下是显示不了的。
我们可以把meterial皮肤样式(framework7.material.css)中的相关样式提取出来覆盖默认样式即可。
比如本样例页面使用的自定义 css 文件是my-app.css,在里面添加如下样式:
$
6
9
:
;
<
*KK搜索栏输入框图标样式覆盖KK*
-&!I'!JD
&()")F.F)*)L%@#M9)M6>N
M9CM69=9=9=CM6>)M9C6:CM6> O"%M9C>M6>>M6>6:M6>6:CM6>
M9C6:CM6>%M9C!M9?M67M67 - 9-")M676>>>M67)CM9M9!M6>
M9CA$;-;M6>$:-,=-6-6,$;-:$M6>$6-;=M6>$<M6>$$-$$M6>$<M6>=-;M6>$<M6
>;-=$M6>$9->=M6>9M6>=-;M6>9+9M6>;-=$M6>9M6>=-;M6>;-=$M6>$<M6>=-;M6>$<
$-<$M6>>M6>9->=-;=M6>:-69$-;,-6,-6-,=;M6>:-==P6>-:=M6>$=:-==;Q
<M6>>,->$M6>$:M6>;M6>$$-==M6>;M6>=-;+,->$M6>;M6>=-;M6>;M6>$:M6>,->$M
6>$:M6>=-;M6>$$-==M6>$:M6>=-;M6>$:QCM67M9M9!M6>
M9CA>M6>>6:6:R>QCM6>NM9C"CM67M9M9M67)M90@
&(&()"QF$,!%$,!%@
&()"QF$,!%$,!%@
G
(注意:background-image中我把图标颜色改成939398,同提示文字一样的浅灰色。原来meterial
皮肤里定义的是FFFFFF白色)
4,测试运行
再次使用安卓手机测试,可以发现放大镜图标正常显示出来了。
当然使用iOS手机也是没问题的。