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

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

* {

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;

}

搜“

”相关微博

搜“

”相关用户

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

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";

}

以下是实例：

以上就是对简单的搜索框样式是如何实现的的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。