Framework7 - Android设备下搜索栏里的放大镜图标不显示
1，问题描述
我是超雪黑卡7.4移动2g卡联通ota卡没有测试4g卡 方法搜索我发的教程，开始只安装超雪联通let补丁使用正常 全市区我个人活动范围内 可以正常使用缺点是使用移动卡 关于本机运营商也显示联通而且不能开关数据漫游，否则重新搜索信号，正常使用10来天没跳激活 但是有时候机器自己搜索信号 时间和频率很短 自动找回信号几乎不影响使用。浏览器搜索：小白用户不会在应用市场下载app，当有需求的时候，他们会到浏览器中直接搜索，虽然浏览器中也会出现应用商店提供的下载入口，但这些应用商店往往会和你的app捆绑下载，甚至在没有安装他们的客户端之前，不允许用户下载。软件已经搜索到了wpa2加密的方式的路由器，当然软件的搜索方式是一起搜索，也就是wep，wpa2一起搜索，看看软件左边栏的“加密方式”你选择wep就会显示wep方式加密的路由，你选择wpa2就会显示wpa2方式加密的路由，咱们这儿讲的是破解wpa2加密方式的路由，所以wep一笔带过，如果是破解wep的路由，直接右边栏的“启动”按钮，剩下的几乎不用动手自动搜索密码(前提是有数据包哦)。
但在 Android 系统下，搜索框前面的放大镜图标却消失不见了。
2，页面代码
<!DOCTYPE html>
<html>
<head>
<!-- meta标签设置-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- app标题 -->
<title>hangge.com</title>
<!-- 使用iOS CSS主题样式-->
<link rel="stylesheet" href="css/framework7.ios.min.css">
<!-- iOS related颜色样式 -->
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">
<!-- 自定义样式-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- 所有的Views视图 -->
<div class="views">
<!-- 主视图（需要有"view-main"样式） -->
<div class="view view-main">
<!-- 顶部导航栏 -->
<div class="navbar">
<div class="navbar-inner">
<!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） -->
<div class="center sliding">hangge.com</div>
</div>
</div>
<!-- 页面容器（Pages container）由于我们使用了固定位置的navbar和toolbar，
所以这里添加额外样式（navbar-through和toolbar-through）-->
<div class="pages navbar-through toolbar-through">
<!-- 首页, "data-page" 里设置页面名字 -->
<div data-page="index" class="page">
<!-- 搜索栏（使用"searchbar-init"样式自动初始化） -->
<form class="searchbar searchbar-init"
data-search-list=".list-block-search" data-search-in=".item-title"
data-found=".searchbar-found" data-not-found=".searchbar-not-found">
<div class="searchbar-input">
<input type="search" placeholder="搜索...">
<a href="#" class="searchbar-clear"></a>
</div>
<a href="#" class="searchbar-cancel">取消</a>
</form>
<div class="searchbar-overlay"></div>
<div class="page-content">
<div class="content-block searchbar-not-found">
没有查询结果!
</div>
<div class="list-block list-block-search searchbar-found">
<ul>
... 查询结果列表 ...
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Framework7框架的js-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- 你的应用的js -->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
3，问题解决办法
您可以个性化定义2345好压压缩软件图标，皮肤样式，让您的压缩软件界面与众不同，独一无二。其中列表状态一屏可显示五个功能，图标状态为12宫格，“带标签的图标”则恢复为传统的9宫格样式，而最方便的“多级显示”可将该功能下的子菜单全部显示，推荐用户使用。可以标注点的图标样式、线颜色、线型、线宽、线的不透度明、面填充色、面边线颜色、面的不透明度和对象标注的文本样式进行修改。
我们可以把meterial 皮肤样式（framework7.material.css）中的相关样式提取出来覆盖默认样式即可。
比如本样例页面使用的自定义css文件是 my-app.css ，在里面添加如下样式：
/** 搜索栏输入框图标样式覆盖 **/
.searchbar input[type="search"] {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23939398'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
-webkit-background-size: 17px 17px;
background-size: 17px 17px;
}
（注意：background-image 中我把图标颜色改成 939398，同提示文字一样的浅灰色。原来 meterial 皮肤里定义的是 FFFFFF 白色）
4，测试运行
再次使用安卓手机测试，可以发现放大镜图标正常显示出来了。css 搜索 放大镜图标
当然使用 iOS 手机也是没问题的。
-
-
李靖怡
就应该采取利比亚那样
-
很棒哦