jQuery Mobile - 如何在搜索栏上获取搜索图标？

我试图实施搜索栏
但我是而不是能够在搜索栏上显示搜索图标。
这里是code (jsfiddle)。我发现默认样式会覆盖我的自定义样式。jQuery Mobile - 如何在搜索栏上获取搜索图标？

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; 
}

如何解决这个问题？

来源

2012-11-09 Priya

嗨，把你的问题改为g et a response ... – Vinay

我在下面找到的默认样式覆盖了我的样式默认样式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; 宽度：100％; 提纲：0; } – Priya

我编辑了你的问题，并挖出了图像和你的代码...... ;-) – Taifun

可能我现在知道你的意思...... 只是删除+登录您的自定义CSS和它的作品; - ）...

enter image description here

示例代码：

<!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>

来源

2012-11-09 22:35:51 Taifun

使用这个

<input type="text" class="ui-input-text ui-body-a" name="" id="searchinput1" placeholder=" Search..." value="" data-type="search">

来源

2012-11-10 07:58:48

jQuery Mobile - 如何在搜索栏上获取搜索图标？

回答

相关问题