Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich mit CSS einen gut aussehenden Suchfeldstil? (Codebeispiel)

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

藏色散人
藏色散人Original
2018-08-10 15:18:1723297Durchsuche

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:

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

Hinweis:

Alle gängigen Browser unterstützen das

-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

Bei Verwendung der Schaltfläche im HTML-Format Element übermitteln verschiedene Browser unterschiedliche Werte. Internet Explorer sendet

[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!

Stellungnahme:
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