簡單的搜尋框樣式是如何實現的？-css教學-PHP中文網

簡單的搜尋框樣式是如何實現的？

云罗郡主

發布： 2018-10-20 14:52:05

轉載

3801 人瀏覽過

這篇文章帶給大家的內容是關於簡單的搜尋框樣式是如何實現的，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

這裡涉及的是清除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>

登入後複製

以下是實例：

簡單的搜尋框樣式是如何實現的？