溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS如何實(shí)現(xiàn)搜索框樣式

發(fā)布時(shí)間：2020-09-14 10:20:10 來源：億速云 閱讀：543 作者：小新 欄目：web開發(fā)

CSS如何實(shí)現(xiàn)搜索框樣式？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

這里涉及的是清除input框默認(rèn)樣式和設(shè)置聚焦樣式；還有就是控制搜索列表的顯示，下面直接給除代碼，可以去試試效果

<!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:陰影的設(shè)置 */
        }

        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="大家正在搜:我們來自同一個(gè)世界" />
        </dt>
        <dd id="suggest">
            <a href="###">搜“
                <span></span>”相關(guān)微博
            </a>
            <p class="xiangguan1">
                <dl>
                    <dd>我們相愛吧</dd>
                    <dd>我們來同一個(gè)世界</dd>
                    <dd>我們都有自己的夢想</dd>
                    <dd>我們不曾放棄</dd>
                </dl>
            </p>
            <a href="###">搜“
                <span></span>”相關(guān)用戶
            </a>
            <p class="xiangguan2">
                <dl>
                    <dd>我們相愛吧</dd>
                    <dd>我們來同一個(gè)世界</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>

以下是實(shí)例：

CSS如何實(shí)現(xiàn)搜索框樣式

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS如何實(shí)現(xiàn)搜索框樣式大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手