css里如何加搜索框,CSS如何实现搜索框样式

CSS如何实现搜索框样式

发布时间：2020-09-14 10:20:10

来源：亿速云

阅读：73

作者：小新

CSS如何实现搜索框样式？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

这里涉及的是清除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 <= 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";

}

以下是实例：

感谢各位的阅读！看完上述内容，你们对CSS如何实现搜索框样式大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。