溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS如何實現搜索框樣式？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
這里涉及的是清除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>以下是實例：
感謝各位的閱讀！看完上述內容，你們對CSS如何實現搜索框樣式大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
