간단한 검색창 스타일을 구현하는 방법은 무엇입니까?
- 云罗郡主앞으로
- 2018-10-20 14:50:423762검색
간단한 검색창 스타일을 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
여기에는 입력 상자의 기본 스타일을 지우고 포커스 스타일을 설정하고 검색 목록 표시를 제어하는 것이 포함됩니다. 코드는 바로 아래에서 제거됩니다. 효과를 시도해 볼 수 있습니다
<!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 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 간단한 검색창 스타일을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제