JQuery Mobile搜索框的背景颜色

大家好，我想改变我的搜索框的背景颜色。它目前是白色的，我希望能够将其更改为自定义颜色。我尝试了一些不同的技术，但背景颜色似乎并不填充整个搜索框，并在搜索字段的两端留下白色。我还希望能够在搜索框的开始处有一个自定义图像，因此可以将占位符文本向右推一点。我也尝试过使用填充等，但我没有运气。任何帮助将非常感激。我使用的搜索框代码可以发现如下：JQuery Mobile搜索框的背景颜色

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>

来源

2013-06-18 Adam.13

请选择一个正确的答案。 – Omar

你的代码几乎是正确的，但你必须在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

来源

2013-06-18 15:55:45 Omar

尝试

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

来源

2013-06-18 15:10:20 pixelator

这仍然不会填满整个输入框我想我应该提到我正在使用jQuery Mobile 1.3.1 –

我从来没有合作过之前的JQuery UI，但我猜你的问题来自于你提供的类的不匹配。你的CSS正在寻求一个样式元素input与class="ui-input-text"嵌套您div与id="search_controls"内..

尝试只 #search_controls input.search-box{/* -- styles -- */}

来源

2013-06-18 15:17:43 connerc

JQuery Mobile搜索框的背景颜色

回答

相关问题