设置输入框背景 [英] Setting an Input Box Background

问题描述

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

I have to create an input box with the following background

到目前为止，在我的代码我有下面的代码，它不显示 - >什么是正确的程序这样做？

So far in my code I have the code below and its not showing -> What would be the correct procedure to do this?

我也有这个按钮的几个变体，我必须产生，它们是：

I also have a couple of variations of this button I have to produce and they are the following:

• 在按钮的黑暗区域有一个十字架 - 我只需要使用一个类和集合来使用< span>

左侧曲线后面的回形针图标 - >我要去的地方

A paper clip icon just after the curve on the left -> I was going to do the same as above -> Would this be a good way to go?

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

推荐答案

Fiddled ：

<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*/
}

如果您打算以不同的宽度重复使用它， href =http://www.alistapart.com/articles/slidingdoors/>推拉门技术。

If you're planning to reuse it with different widths, you should look up the sliding doors technique.

这篇关于设置输入框背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！