Question

.field {
  float: right;
  width: 170px;
  height: 23px;
  font: normal 13px Arial, Helvetica, sans-serif;
  padding: 6px 24px 6px 6px;
  background: #c1caca;
  margin: 25px 10px
}
.search {
  background: url(../images/search-icon.png) right no-repeat;
}

<div>
  <form action="#" method="post">
    <input type="text" class="field search ">
  </form>
</div>

Answer 1

background的{{1}}覆盖了search而不是background-color

的颜色和背景颜色

background

.field {
  float: right;
  width: 170px;
  height: 23px;
  font: normal 13px Arial, Helvetica, sans-serif;
  padding: 6px 24px 6px 6px;
  background-color: #c1caca;
  margin: 25px 10px
}
.search {
  
}

Answer 2

使用两个background-image和background-color时，您应该更加具体，否则将覆盖该属性

＆＃13;

.field {
    float: right;
    width: 170px;
    height: 23px;
    font: normal 13px Arial, Helvetica, sans-serif;
    padding: 6px 24px 6px 6px;
    background-color: #c1caca;
    margin: 25px 10px
}
.search {
    background-image: url(http://cdn.flaticon.com/png/256/48362.png);
    background-size:32px;
    background-position:right;
    background-repeat:no-repeat;
    padding-right:36px;
}

＆＃13;

<div>
    <form action="#" method="post">
        <input type="text" class="field search ">
    </form>
</div>

＆＃13;

或者您可以在同一个地方使用背景颜色和图像

background:#c1caca url(http://cdn.flaticon.com/png/256/48362.png) no-repeat right;

＆＃13;

.field {
    float: right;
    width: 170px;
    height: 23px;
    font: normal 13px Arial, Helvetica, sans-serif;
    padding: 6px 24px 6px 6px;
    margin: 25px 10px
}
.search {
    background:#c1caca url(http://cdn.flaticon.com/png/256/48362.png) no-repeat right;
    background-size:32px;
    padding-right:36px;
}

＆＃13;

<div>
    <form action="#" method="post">
        <input type="text" class="field search ">
    </form>
</div>

＆＃13;

Answer 3

    Your solution is here


   `.field{
   float:right;
   width:170px;
   height:23px;
   font: normal 13px Arial, Helvetica, sans-serif;
   padding:6px 24px 6px 6px;
   background:url(http://www.sitewelder.com/art2012/logo-big-searchoptimization.png)right no-repeat;
   background-color:yellow;
   background-size: 40px 40px;
   margin:25px 10px }`

    http://jsfiddle.net/recobee/rg9tnsox/

Answer 4

您还可以使用background-image css属性和“background-position”属性

<input style="background-image: url('http://placehold.it/350x25/f00')" type="text" >

如何设置输入文本的背景颜色？

4 个答案: