CSS搜索框如图的搜索框怎么做??

发布网友 发布时间：2022-04-24 18:56

我来回答

共4个回答

热心网友 时间：2022-04-06 13:22

弄个背景就如上面那图，然后把input文本框，边框设置为0，背景设置为none（空），大小设置为合适大小，然后设置绝对定位，定位到指定位置。追问那提交按钮怎么办啊？

追答一样的。

热心网友 时间：2022-04-06 14:40

用<li>定义背景色，然后引用就行了追问大哥，你确定你考虑过了就回答我

热心网友 时间：2022-04-06 16:15

用图做背景 输入框和提交按钮用绝对定位

热心网友 时间：2022-04-06 18:06

直接拿你这张图片另存下来做了一个大概的，你参考一下，下面是代码样式
<div class="Search_Box">
<ul class="Search_ul">
<li class="Search_ul_Input"><input name="" type="text" /></li>
<li class="Search_ul_Btn"><input name="" type="button" /></li>
</ul>
</div>

.Search_Box{ float:left; background:#000a; padding:10px;}

.Search_ul{ float:left; height:28px; margin:0; padding:0; list-style-type:none;}
.Search_ul_Input{float:left; background:url(images/faedab034f78f021988f6679310a55b2191c97.jpg) -4px -12px no-repeat; width:120px; padding:3px 8px 0px 10px; height:25px;}
.Search_ul_Input input{ width:120px; border:none; font:12px Arial, Helvetica, sans-serif; line-height:16px; height:16px; background:none;}
.Search_ul_Input input:hover{ width:120px; border:none; font:12px Arial, Helvetica, sans-serif; line-height:16px; height:16px; background:none;}
.Search_ul_Btn{float:left; width:28px; height:28px; padding:0;}
.Search_ul_Btn input{ width:28px; height:28px; border:none; background:url(images/faedab034f78f021988f6679310a55b2191c97.jpg) -142px -12px no-repeat; cursor:pointer; vertical-align:middle;}

题外话，你都没确定你问题已经解决了就采纳，害我白做了几分钟