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 응답 ... – Vinay

내 스타일을 무시하고 기본 스타일을 찾았습니다. DEFAULT STYLE input.ui-input-text, textarea.ui-input-text { background-image : none; 패딩 : .4em; 여백 : .5em 0; 줄 높이 : 1.4; 글꼴 크기 : 16px; display : 블록; 너비 : 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 - 검색 창에서 검색 아이콘을 얻는 방법?

답변

관련 문제