1，問題描述
最近在使用 Framework7 開發跨平台的H5應用。當使用搜尋欄（searchBar）的時候，在 iOS 系統中顯示是正常的。
但在 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，問題解決辦法
由於我使用的是 iOS 皮膚樣式（framework7.ios.min.css），這裡面定義的 .searchbar input[type="search"] 的 background-image 在 Android 下是顯示不了的。
我們可以把 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，測試回合
再次使用安卓手機測試，可以發現放大鏡表徵圖正常顯示出來了。
當然使用 iOS 手機也是沒問題的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
