1

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

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

3 回答 3

4

您的代码几乎是正确的，但您在 CSS 选择器中有一点错误input.ui-input-text。它应该是div.ui-input-text或.ui-input-text。

此外，搜索输入不同于其他类型的输入。周围的 div 有 class .ui-input-search。

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

演示

于 2013-06-18T15:55:45.457 回答
0

尝试

background-image: url("../../images/search.jpg") 1% no-repeat !important;
background-color: #2ECCFA !important;
于 2013-06-18T15:10:20.693 回答
0

我以前从未使用过 JQuery UI，但我猜您的问题来自您提供的类不匹配。您的 CSS 正在寻找嵌套在您的with中的input元素样式。class="ui-input-text"divid="search_controls"

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

于 2013-06-18T15:17:43.980 回答