当前位置：首页 → 问答吧 → 搜索文本框样式

搜索文本框样式

时间：2010-07-20

来源：互联网

我想学习制作图片中的这个搜索文本框样式就是怎么把,搜索按钮和搜索文本给容为一体看图

作者: luo7612 发布时间: 2010-07-20

设置input框的样式background-image:url("那个图片的地址");

作者: hibin101 发布时间: 2010-07-20

1楼的方法不可用，因为在ie6下会有bug。
HTML code


<div style="border:1px solid grey;height:20px;padding:0 30px 0 0;background:('submit.jpg')">
    <input type="text" style="border:none;vertical-align:middle;">
</div>

ps：padding:0 30px 0 0;30px要根据图片的宽度而定。height:20px;要根据input的高度而定。

作者: natici 发布时间: 2010-07-21

引用 1 楼 hibin101 的回复:

设置input框的样式background-image:url("那个图片的地址");

这个方法是可以的

作者: lemon520 发布时间: 2010-07-21

引用 3 楼 lemon520 的回复:
引用 1 楼 hibin101 的回复:

设置input框的样式background-image:url("那个图片的地址");

这个方法是可以的

可以？忽略ie6？你认为可以的话试试用这种方式，然后在input框内输入超过input本身长度的内容看看有什么效果？

作者: natici 发布时间: 2010-07-21

引用 4 楼 natici 的回复:

引用 3 楼 lemon520 的回复:
引用 1 楼 hibin101 的回复:

设置input框的样式background-image:url("那个图片的地址");

这个方法是可以的

可以？忽略ie6？你认为可以的话试试用这种方式，然后在input框内输入超过input本身长度的内容看看有什么效果？

我试过这种方法了。。。。IE6/FF/Chrome都很正常，没什么异常效果，倒是safari没显示背景，但我不想深究了。不知道你说的是什么效果？
HTML code


<style type="text/css">
.searchInput {
    background-image: url('search.png');
    background-repeat: no-repeat;
    background-position: 100%;
}
</style>

<input type="text" class="searchInput">