So schreiben Sie ein CSS-Suchfeld

So implementieren Sie ein Suchfeld in CSS: Organisieren Sie zuerst die Seitenstruktur. Verwenden Sie dann Platzhalter, um das Textfeld zu kommentieren. Setzen Sie dann die Standard-Außenränder und Innenränder der Seite zurück Stil des Suchfelds.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie schreibe ich ein CSS-Suchfeld?

Verwenden Sie p+css, um den Suchfeldeffekt zu erzielen, wie im Bild gezeigt:

Analyse:

1. Verwenden Sie Markman, um die Breite, Höhe, Farbe und andere Aspekte des Originalbilds zu analysieren , wie unten gezeigt:

2. Analyseelemente:
Das Suchfeld besteht hauptsächlich aus: Eingabetextfeld, Schaltfläche und einem dreieckigen Anzeigesymbol auf der linken Seite der Schaltfläche;

Organisieren Sie zunächst die Seitenstruktur:

•  

     <input>      SEARCH        <span></span>             

Textfeld, Platzhalter für Textfeldanmerkung verwenden:

• <input>

Suchschaltfläche:

• <button>SEARCH</button>

Dreieckiges Indikatorsymbol: Aus dem Beispielbild ist dieses Dreieckssymbol in die integriert Schaltfläche, daher haben wir uns zunächst entschieden, sie als Schaltfläche zu verwenden. Interne Elemente werden mithilfe der Positionierung implementiert Stil des Klassenformulars:

• <button>SEARCH
    <span></span>
  </button>

Settings Der äußere Rahmenstil des Suchfelds, legen Sie die Transparenz fest, entfernen Sie die äußere Rahmenlinie und legen Sie den Bogenmaß des Rahmens fest:

    *{
        margin:auto;
        padding:0;
     }

• Legen Sie den Eingabefeldstil fest:

 .form{
        width: 454px;
        height: 42px;
        background:rgba(0,0,0,.2);
        padding:15px;
        border:none;
        border-radius:5px;  
}

Der Randbogenmaß kann auch abgekürzt werden als:

• background:rgba(0,0,0,.2);
  border:none;
  border-radius:5px;

Schriftstil festlegen:

input{
    width: 342px;
    height: 42px;
    background-color: #eeeeee;
    border:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    font-style:italic;
}

Es gibt andere Attributwerte:

Attributwert

• Beschreibung.

normal

Standardwert. Der Browser zeigt einen Standardschriftstil an. obliqueinheritBeachten Sie, dass hier die relative Positionierung verwendet wird:

    style-style:italic

wird verwendet, um die Position des Dreiecks anzuzeigen;

button{
    width:112px;
    height: 42px;
    background-color:#d93c3c;
    color:#fff;
    border:none;
    border-radius:0 5px 5px 0;
    position: relative;
}

Dies Das Element verwendet die absolute Position und positioniert seine Y-Koordinate von rechts nach links an der 100 %-Randposition des Referenzelements. Wenn die X-Koordinate nicht festgelegt ist, ist sie standardmäßig 0:

italic	Der Browser zeigt einen kursiven Schriftstil an.
Der Browser zeigt einen schrägen Schriftstil an.
gibt an, dass der Schriftstil vom übergeordneten Element geerbt werden soll.
Schaltflächenstil:	border-radius:5px 0 0 5px;
	gibt den Stil des Dreiecks an:

 position: relative;

Schritte zum Erstellen eines Dreiecksanzeigesymbols:

Definieren Sie das Spannenelement des Dreiecks:

 .t{
    border-width:6px;
    border-style:solid;
    border-color: transparent #d93c3c transparent transparent;
    position: absolute;
    right:100%;
}

Erstellen Sie einen vierfarbigen Rahmen:

•  position: absolute;
   right:100%;

border-color Die vier Werte repräsentieren nacheinander die Farben des oberen, rechten, unteren und linken Rands.

【Empfohlenes Lernen:

CSS-Video-Tutorial

】

• In welche Richtung Sie das Dreieck benötigen, stellen Sie einfach die anderen drei Dreiecke so ein, dass sie transparent sind

<span></span>

Verwenden Sie kein Span, sondern Pseudoklassen zur direkten Positionierung Löschen Sie dann das Span-Element und den Stil des Dreiecks und fügen Sie ihn direkt dem Stil des Schaltflächenelements hinzu. Der vollständige Code lautet wie folgt:

rrree

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein CSS-Suchfeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!