Css 设置输入框背景

我必须创建一个具有以下背景的输入框

到目前为止，在我的代码中，我有下面的代码，它没有显示->正确的程序是什么

我还必须生产几个不同的按钮，如下所示：

• 在按钮的黑暗区域有一个十字-我只是想用一个类的
  标记，并将图形设置为->这是一个好方法吗

• 一个回形针图标就在左边的曲线后面->我打算做如上->这是一个好方法吗

HTML:

<div class="innerTo">
        <form action="#" method="get">
           <label for="recipients">TO: </label>
              <input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
    </form>
    </div>

.innerBar .innerTo{
    width:200px;
    padding:5px 0 0 15px;
    display:block;
    float:left;
}
.innerBar .innerTo label{
    margin:0 15px 0 0;
    font-size:14px;
    font-weight:bold;
    color:#666666;
}
.innerBar .innerTo input[type=search] {
    color: red;
}
.innerBar .recipients{
    background-image:url('../images/searchBGpng.png') no-repeat;
    width:192px;
    height:27px;
}

:

.输入容器{
背景：url(http://i.stack.imgur.com/0Vlc5.png)不重复；
宽度：197px；
高度：28px；
}
.输入容器输入{
高度：28px；
行高：28px；/*可使文本垂直对齐*/
边界：无；
背景：透明；
填充：0 10px；/*不要直接从边缘开始输入文本*/
宽度：148px；/*全宽-侧面为灰色-2*10px填充*/
}

---

如果您打算以不同的宽度重复使用它，您应该查找。

如果您喜欢，我已经为您的表单创建了新代码，然后继续将其应用于html代码

您可以这样做

label{
float:left;
    margin:25px 0 0 0px;
    padding:0;
}

input[type="search"], input[type="submit"]{
margin:20px 0 0 0px;
    padding:0;
     line-height:28px;
    height:28px;
    background: url("http://i.stack.imgur.com/0Vlc5.png") no-repeat 0 0;
    border: 0 none;
    float:left;
}

input[type="search"]{
width:152px;
    padding-left:15px;
}

input[type="submit"]{
background-position:-167px 0;
    width: 30px;
    cursor:pointer;
}

HTML代码

<form action="#" method="get">
           <label for="recipients">TO: </label>
              <input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
    <input type="submit" value="">
    </form>

现场演示链接在这里

---

现在根据您的布局更改代码这只是一个演示……

谢谢o.v.我的变体有正确的方法吗？@JessMcKenzie:看看您选择如何使用

type=“search”

，您应该可以使用伪元素，而不是硬编码的跨度等。出现的第一个链接之一：@JessMcKenzie:另外-不太喜欢浮动汤-就个人而言，我会在容器上设置

位置：relative

，以及图标的绝对位置（你甚至可以使用smth将图标放置在容器元素外，比如

left:-20px；

）将行高设置为输入字段的全高，插入符号在Windows上的Chrome中看起来会很奇怪。有没有办法避免这种情况？@damd:hmm…定义“奇怪”，或者可能添加一个屏幕截图+Chrome版本#？

label{
float:left;
    margin:25px 0 0 0px;
    padding:0;
}

input[type="search"], input[type="submit"]{
margin:20px 0 0 0px;
    padding:0;
     line-height:28px;
    height:28px;
    background: url("http://i.stack.imgur.com/0Vlc5.png") no-repeat 0 0;
    border: 0 none;
    float:left;
}

input[type="search"]{
width:152px;
    padding-left:15px;
}

input[type="submit"]{
background-position:-167px 0;
    width: 30px;
    cursor:pointer;
}