我正在尝试实现一个搜索栏
但是我无法在搜索栏上显示搜索图标。
这是code (jsfiddle) 。
我发现默认样式会覆盖我的自定义样式。
HTML
<div id="search_controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
</div>
input.ui-input-text, textarea.ui-input-text {
background-image: none;
padding: .4em;
margin: .5em 0;
line-height: 1.4;
font-size: 16px;
display: block;
width: 100%;
outline: 0;
}
自定义样式
#search_controls + input.ui-input-text{
background: url('../img/search_icon.png') 98% center no-repeat!important;
height: 26px;
padding: .4em;
margin: .5em;
font-size: 15px;
display: block;
width: 99%!important;
outline: 0;
}
如何解决这个问题？
最佳答案
也许我现在知道你的意思了......
只需删除自定义 CSS 中的 + 符号即可正常工作;-)...
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#search_controls input.ui-input-text{
background: url('taifun.png') 98% center no-repeat!important;
height: 26px;
padding: .4em;
margin: .5em;
font-size: 15px;
display: block;
width: 99%!important;
outline: 0;
}
</style>
</head>
<body>
<div data-role="page">
<div id="search_controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
</div>
</div><!-- /page -->
</body>
</html>
关于html - jQuery Mobile - 如何在搜索栏上获取搜索图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13309955/