Wie erstelle ich mit CSS einen gut aussehenden Suchfeldstil? (Codebeispiel)

Dieser Artikel stellt Ihnen einen gut aussehenden CSS-Suchfeldstil vor. Ich hoffe, dass er für interessierte Freunde hilfreich ist.

Das spezifische Beispiel für den CSS-Suchfeld-Stilcode lautet wie folgt:

<div class="search bar">
    <form>
        <input placeholder="css搜索框代码测试" name="cname" type="text">
        <button type="submit"></button>
    </form>
</div>

Der Stilstilcode lautet wie folgt:

* {
    box-sizing:border-box;
}
div.search {
    padding:10px 0;
}
form {
    position:relative;
    width:300px;
    margin:0 auto;
}
input,button {
    border:none;
    outline:none;
}
input {
    width:100%;
    height:42px;
    padding-left:13px;
}
button {
    height:42px;
    width:42px;
    cursor:pointer;
    position:absolute;
}     
.bar input {
    border:2px solid #c5464a;
    border-radius:5px;
    background:transparent;
    top:0;
    right:0;
}
.bar button {
    background:#c5464a;
    border-radius:0 5px 5px 0;
    width:60px;
    top:0;
    right:0;
}
.bar button:before {
    content:"搜索";
    font-size:13px;
    color:#F9F0DA;
}

Der obiger Suchfeld-CSS-Code-Testeffekt Wie unten gezeigt:

Hinweis:

Alle gängigen Browser unterstützen das -Tag.

-Tag wird zum Sammeln von Benutzerinformationen verwendet. Eingabefelder können abhängig vom Wert des Typattributs viele Formen annehmen. Eingabefelder können Textfelder, Kontrollkästchen, maskierte Textsteuerelemente, Optionsfelder, Schaltflächen usw. sein. Das Tag

definiert eine Schaltfläche. Innerhalb des Schaltflächenelements können Sie Inhalte wie Text oder Bilder platzieren. Dies ist der Unterschied zwischen diesem Element und Schaltflächen, die mithilfe von Eingabeelementen erstellt wurden.

Bei Verwendung der Schaltfläche im HTML-Format Element übermitteln verschiedene Browser unterschiedliche Werte. Internet Explorer sendet Text dazwischen, während andere Browser den Inhalt des Wertattributs übermitteln. Bitte verwenden Sie Eingabeelemente in HTML-Formularen, um Schaltflächen zu erstellen.

[Empfohlene verwandte Artikel]

CSS zum Erstellen eines gut aussehenden Suchfelds

HTML zur Implementierung fester schwebender Transluzenz Suche auf mobiler Box

8 CSS3-Suchfelder teilen

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen gut aussehenden Suchfeldstil? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!