我必须创建一个具有以下背景的输入框
到目前为止,在我的代码中,我有下面的代码,但它没有显示 -> 执行此操作的正确程序是什么?
我还必须制作此按钮的几个变体,如下所示:
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(https://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*/
}
如果您打算以不同的宽度重复使用它,您应该查找推拉门技术.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)