Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie implementiert man einen einfachen Suchfeldstil?

云罗郡主
Freigeben: 2018-10-20 14:52:05
nach vorne
3762 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung eines einfachen Suchfeldstils. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Hier geht es darum, den Standardstil des Eingabefelds zu löschen und den Fokusstil festzulegen und die Anzeige der Suchliste zu steuern. Der Code wird direkt unten entfernt und Sie können den Effekt ausprobieren

<!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>
Nach dem Login kopieren

Nachfolgend finden Sie Beispiele:

Wie implementiert man einen einfachen Suchfeldstil?

Das Obige ist eine vollständige Einführung in die Implementierung des einfachen Suchfeldstils, falls Sie mehr über CSS-Video-Tutorial, achten Sie bitte auf die chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonWie implementiert man einen einfachen Suchfeldstil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage