CSS 设置输入框背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10843966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting an Input Box Background
提问by Jess McKenzie
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:
我还必须制作此按钮的几个变体，它们如下：
A cross on the dark area of the button - I was just going to use a
<span>tag with a class and set the graphic to that -> Would this be a good way to go?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?
按钮黑暗区域上的十字 - 我只是打算使用一个
<span>带有类的标签并将图形设置为那个 -> 这是一个好方法吗？左边曲线后面的回形针图标 -> 我打算做和上面一样的 -> 这是一个好方法吗？
HTML:
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:
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;
}
回答by o.v.
摆弄：
<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*/
}
If you're planning to reuse it with different widths, you should look up the sliding doors technique.
如果您打算以不同的宽度重复使用它，您应该查看推拉门技术。
回答by Rohit Azad
I have created new code for your form if you like this, then go ahead and apply it to your html code
如果您喜欢，我已经为您的表单创建了新代码，然后继续将其应用于您的 html 代码
You can do this
你可以这样做
HTML Code
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 Code
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;
}
Live demo link here http://jsfiddle.net/AL6vb/4/
现场演示链接在这里http://jsfiddle.net/AL6vb/4/
Now change to code according your layout this is only demo .......
现在根据您的布局更改为代码，这只是演示......
