JQuery 모바일 검색 상자 배경색

Question

안녕 모두 내 검색 상자의 배경색을 변경하려고합니다. 현재 흰색이며 사용자 정의 색상으로 변경할 수 있기를 원합니다. 몇 가지 다른 기법을 시도했지만 배경색이 전체 검색 창을 채우는 것처럼 보이고 검색 필드의 양쪽 끝에 흰색이 남습니다. 또한 검색 상자의 시작 부분에 사용자 지정 이미지를 표시하여 자리 표시 자 텍스트를 오른쪽으로 밀고 싶을 수도 있습니다. 나는 또한 패딩 등을 사용하여 이것을 시도했지만 다시는 행운이 없었다. 어떤 도움이라도 대단히 감사 할 것입니다. 내가 검색 상자 사용하고 아래의 코드는 찾을 수 있습니다

CSS :

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #424242; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
    color: #424242; 
} 

#search_controls input.ui-input-text{ 
    background: url("../../images/search.jpg") 1% no-repeat !important; 
    background-color: #2ECCFA !important; 
    outline: 0; 
    } 

HTML :

<div id="search_controls"> 
<input type="number" class="search-box" placeholder="Number" /> 
</div> 

Answer 1

귀하의 코드는 거의 정확하지만 CSS 선택기 input.ui-input-text에 약간의 실수가 있습니다. div.ui-input-text 또는 .ui-input-text이어야합니다.

또한 검색 입력은 다른 유형의 입력과 다릅니다. 주변 div는 클래스 .ui-input-search입니다.

.ui-input-text, .ui-input-search { 
background: url("../../images/search.jpg") 1% no-repeat !important; 
background-color: #2ECCFA !important; 
outline: 0 
} 

Demo

Answer 2

이

background-image: url("../../images/search.jpg") 1% no-repeat !important; 
background-color: #2ECCFA !important; 

Answer 3

내가 연주 적이 시도 이전에는 JQuery UI 였지만 제공 한 클래스의 불일치로 인해 문제가 발생했다고 생각합니다. 귀하의 CSS는

시도 .. id="search_controls"와 div 안에 중첩 class="ui-input-text"과 input 요소의 스타일을 찾고 단지 #search_controls input.search-box{/* -- styles -- */}