So schreiben Sie ein CSS-Suchfeld-CSS-Tutorial-php.cn

So schreiben Sie ein CSS-Suchfeld

藏色散人

Freigeben： 2023-01-07 11:45:37

Original

12066 Leute haben es durchsucht

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.

So schreiben Sie ein CSS-Suchfeld

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:

So schreiben Sie ein CSS-Suchfeld

Analyse:

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

So schreiben Sie ein CSS-Suchfeld

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:

Nach dem Login kopieren
<input>

Textfeld, Platzhalter für Textfeldanmerkung verwenden:

```
<input>
```
Nach dem Login kopieren

Suchschaltfläche:

```
<button>SEARCH</button>
```
Nach dem Login kopieren

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>

Nach dem Login kopieren

    *{
        margin:auto;
        padding:0;
     }

Nach dem Login kopieren

Legen Sie den Eingabefeldstil fest:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Attributwert

Beschreibung.

normal

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

    style-style:italic

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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; Nach dem Login kopieren
	gibt den Stil des Dreiecks an:

 position: relative;

Nach dem Login kopieren

Definieren Sie das Spannenelement des Dreiecks:

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

Nach dem Login kopieren

Erstellen Sie einen vierfarbigen Rahmen:

```
 position: absolute;
 right:100%;
```
Nach dem Login kopieren

【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>

Nach dem Login kopieren

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!