html中的搜索框怎么做

发布网友发布时间：2022-04-25 09:10

共5个回答

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

我自己简单做了一个，因为上传图片麻烦，所以图中的图片我直接用文字代替，弄个背景就ok，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="author" content="blog.anchen8.net">
<title>无标题 1</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .search{
        margin: 30px;
        width: 210px;
        height:35px;
        border:1px solid silver ;
    }
    .search_key{
        width: 150px;
        height: 25px;
        border: none;
        margin-top: 5px;
        margin-left: 5px;
    }
    .submit{
        background:none;
        margin-top: 5px;
        width:40px;
        height: 25px;
        border: none;
/*这个添加背景图即可*/
    }
    </style>
</head>
<body>
<form action="" method="post">
    <div class="search">
        <input type="text" class="search_key" value="站内搜索" />
        <input type="submit" class="submit" value="搜索">
    </div>
</form>
</body>
</html>

效果如下：

热心网友时间：2022-04-19 07:26

<input type="text" class="aa" /><input type="button" value="search" />
.aa{width:100px; height:20px; boder:solid 1px #f00;}//定义搜索框的大小高度以及边框颜色。

思路是：
放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；
下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！

热心网友时间：2022-04-19 09:00

付费内容限时免费查看回答亲您好很高兴为你解答：为你查询到

html制作一个搜索框，代码是什么？

1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：

2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：

3、按crtl+s，在软件的右侧即可看到最终的效果。以上就是用html制作搜索框的演示：

热心网友时间：2022-04-19 10:52

<form>
<input type="text" name="name" value="站内搜索" />
<input type="submit" value="提交" />
</form>

大体上就是这样他用css设置了我提交那个按钮的背景图片