设置输入框背景(Setting an Input Box Background)

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

所以在我的代码，到目前为止，我有下面的代码和它没有显示 - >什么是正确的程序做到这一点？

我也有一对夫妇的这个按钮，我有可能产生的变化，他们有以下几种：

• 我正要使用-按钮的暗区交叉<span>标签与类和设置图形到- >这会是一个很好的路要走？

• >我打算做上述相同 - - 刚过左边的曲线回形针图标>这会是一个很好的路要走？

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>

CSS：

.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;
}

Answer 1:

拨弄 ：

<div class="input-container">
    <input type="text" value="aaaaaaaaaaaaaaaaaa"/>
</div>

.input-container {
    background: url(http://i.stack.imgur.com/0Vlc5.png) no-repeat;
    width:197px;
    height:28px;
}
.input-container input{
    height:28px;
    line-height:28px;/*results in nice text vertical alignment*/
    border:none;
    background:transparent;
    padding:0 10px;/*don't start input text directly from the edge*/
    width:148px;/*full width - grey on the side - 2*10px padding*/
}

如果你打算使用不同宽度的重用它，你应该看看了滑动门技术 。

Answer 2:

我有，如果你喜欢这个，然后继续前进，把它应用到你的HTML代码中创建新的代码为表单

你可以这样做

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>

CSS代码

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;
}

这里现场演示环节http://jsfiddle.net/AL6vb/4/

现在，根据你的布局，这只是演示更改代码.......

文章来源: Setting an Input Box Background