html中搜索框怎么做?

发布网友发布时间：2022-04-24 06:10

共3个回答

懂视网时间：2022-04-28 17:12

本篇文章给大家带来的内容是关于简单的搜索框样式是如何实现的，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这里涉及的是清除input框默认样式和设置聚焦样式；还有就是控制搜索列表的显示，下面直接给除代码，可以去试试效果

<!DOCTYPE html>
<html>

<head>
 <meta charset=" utf-8">
 <title>新浪微博搜索框功能</title>
 <style type="text/css">
 * {
  padding: 0;
  margin: 0;
 }

 body {
  font-size: 14px;
 }

 #box {
  width: 600px;
  margin: 40px auto;
 }

 input {
  width: 240px;
  height: 24px;
  line-height: 24px;
  border: 1px solid gray;
  padding: 0 10px;
  background: #eee;
  outline: none;
  /* box-shadow: inset 0 0 0px #999; */
  /* box-shadow:阴影的设置 */
 }

 input[type="text"]:focus,
 input[type="password"]:focus {
  border: 1px solid #eb7350;
  background: #fff;
  outline: none;
 }

 #suggest {
  display: none;
  position: relative;
  margin-top: -1px;
  width: 240px;
  padding-top: 1px;
  border: 1px solid #369;
  border-top: 0 none;
  border-radius: 4px;
  box-shadow: inset 0 0 2px #999;
  overflow: hidden;
 }

 #suggest a {
  display: block;
  color: #f00;
  height: 24px;
  line-height: 24px;
  text-decoration: none;
  padding: 0 4px;
 }

 #suggest a:hover {
  background: #eee;
 }

 #suggest a span {
  color: #369;
 }

 .xiangguan1,
 .xiangguan2 {
  font-size: 14px;
 }

 .xiangguan1 dl dd,
 .xiangguan2 dl dd {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 6px;
  box-sizing: border-box;

 }

 .xiangguan1 dl dd:hover,
 .xiangguan2 dl dd:hover {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  background: #eee;
  color: #f00;
  cursor: pointer;
 }
 </style>

</head>

<body>
 <dl id="box">
 <dt>
  <input type="text" name="" id="in" placeholder="大家正在搜:我们来自同一个世界" />
 </dt>
 <dd id="suggest">
  <a href="###">搜“
  <span></span>”相关微博
  </a>
  <p class="xiangguan1">
  <dl>
   <dd>我们相爱吧</dd>
   <dd>我们来同一个世界</dd>
   <dd>我们都有自己的梦想</dd>
   <dd>我们不曾放弃</dd>
  </dl>
  </p>
  <a href="###">搜“
  <span></span>”相关用户
  </a>
  <p class="xiangguan2">
  <dl>
   <dd>我们相爱吧</dd>
   <dd>我们来同一个世界</dd>
   <dd>我们都有自己的梦想</dd>
   <dd>我们不曾放弃</dd>
  </dl>
  </p>
 </dd>
 </dl>
 <script type="text/javascript">
 window.onload = function () {
  var obox = document.getElementById("box");
  var obj = document.getElementById("in");
  var osug = document.getElementById("suggest");
  var oa = osug.getElementsByTagName("span");
  obj.oninput = obj.onpropertychange = onchange;
  obj.onblur = function () { disbox() } ;
  function onchange() {
  var txt = this.value;
  var words = txt.length;
  if (words == 0) {
   osug.style.display = "none";
  }
  else if (words > 0) {
   osug.style.display = "block";
   var limit
   if (words <= 8) {
   limit = txt
   }
   else {
   limit = txt.substring(0, 8) + "...";
   }
   for (var index = 0; len = oa.length, index < len; index++) {
   oa[index].innerHTML = limit;
   }
  }
  }
 };
 function disbox() {
  document.getElementById("suggest").style.display = "none";
 }
 </script>
</body>

</html>

以下是实例：

微信截图_20181020143942.png

热心网友时间：2022-04-28 14:20

这是一个最简单样式的搜索框，没有很复杂的样式。如果需要设计样式可以根据class="aa"来写样式，.aa{}在括号中添加代码即可，当然这是框的样式，按钮的样式.bb{}在括号中填写代码即可。

其他代码学习的方法：如果有想要学习的代码不知道怎么实现，可以先打开一个有你想学的元素的网页（比如你想学习搜索框就打开里面有搜索框的网页），浏览器都能直接查看代码的，现在很多浏览器可以用开发人员工具查看网页代码结构。默认的快捷键都是F12，或者在想看的HTML元素上点右键——审查元素，然后就可以看到你想要的代码了，看懂学习即可

HTML：超文本标记语言，标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括 “头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

热心网友时间：2022-04-28 15:38

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

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

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

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

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