设置输入框背景 [英] 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;
}
推荐答案
<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屋!