HTML5-Übungs-detaillierte Grafik- und Texterklärung des skalierbaren mobilen Suchfelds

Heute werde ich vorstellen, wie man mit CSS ein skalierbares mobiles Suchfeld erstellt, das sich sehr gut für mobile Responsive-Design-Anforderungen eignet. Dieses Tutorial verwendet kein JavaScript , sondern nur native CSS--Attribute , daher handelt es sich um eine sehr einfache und effiziente Implementierung.

Zweck

Bei der Anzeige von Informationen auf mobilen Geräten muss jeder Zentimeter Land wertvoll und jeder Zentimeter des Bildschirms wertgeschätzt werden. Beispielsweise befindet sich das Design des Suchfelds im Normalfall in einem zusammengezogenen Zustand und wird bei Aktivierung erweitert. Dadurch kann mehr Anzeigefläche für andere Elemente auf dem Bildschirm bereitgestellt werden. Genau das wird dieser Kurs bewirken. Schauen wir uns zunächst ein Rendering an:

Auf meiner Website „Best Web Gallery“ gibt es ein ähnliches Design, wenn die Schaltfläche Abfrage aktiviert ist 🎜> Wenn darauf geklickt wird, wird das Fokus-Ereignis von jquery ausgelöst und in das Suchfeld eingeblendet.

HTML-Code

Der folgende Code verwendet das Suchtag von

html5:

<form>
    <input type="search" placeholder="Search"></form>

Webkit-Standardsucheingabefeld zurücksetzen

Der Stil des Standard-Webkit-Eingabefelds ist wie folgt:

Um die Standardeinstellung zu entfernen Lassen Sie ihn sehen, dass es eher wie ein allgemeines Texteingabefeld aussieht. Wir müssen das folgende CSS hinzufügen:

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

Festlegen des Stils des Eingabefelds

Ich werde nicht jeden Schritt Zeile für Zeile erklären, hier werden nur einige Punkte hervorgehoben. Die Breite der Suche, die ich standardmäßig festgelegt habe, beträgt 55 Pixel. Wenn sie im Fokus ist, wird sie erweitert und die Breite beträgt 130 Pixel. Das Übergangsattribut implementiert den

Animationseffekt und Box-Shadow wird verwendet, um einen leuchtenden Effekt auf dem Eingabefeld zu erzielen.

Beispiel B

In Demo B ist das Suchfeld minimiert, mit nur einem Abfragesymbol und ohne Texteingabeteil. Ich habe die Eigenschaften

padding und width der Suche geändert, um eine perfekt runde Schaltfläche anzuzeigen. Ich verwende auch color:transparent, um den Textbereich auszublenden.

Browserkompatibel

Läuft normal auf allen gängigen Browsern wie Chrome, Firefox, Safari und IE8+. Allerdings werden Browser von IE7 und niedrigeren Versionen nicht unterstützt, da IE das Sucheingabefeld nicht erkennen kann und die Pseudoklasse

:focus nicht unterstützt.

Das obige ist der detaillierte Inhalt vonHTML5-Übungs-detaillierte Grafik- und Texterklärung des skalierbaren mobilen Suchfelds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!