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希望将input元素与class="ui-input-text"嵌套在div id="search_controls"内，以#search_controls input.search-box{/* -- styles -- */}

试试吧 {{1}}

JQuery Mobile搜索框背景颜色

3 个答案: