jquery fügt Eingabestil hinzu

Im Webdesign ist das Eingabefeld eine der wichtigsten Möglichkeiten für Benutzer, Informationen einzugeben. Die Schönheit seines Stils wirkt sich direkt auf das Benutzererlebnis aus. Als sehr beliebte JavaScript-Bibliothek kann uns jQuery dabei helfen, Eingabestile einfach hinzuzufügen und zu ändern. In diesem Artikel werden einige gängige jQuery-Vorgänge vorgestellt, mit denen Sie den Stil des Eingabefelds schnell verbessern können.

1. Grundlegende Stileinstellungen

1. Ändern Sie die Hintergrundfarbe

Sie können das Eingabefeld wie folgt festlegen Code Hintergrundfarbe:

$('input').css('background-color', '#f6f6f6');

2. Rahmenfarbe ändern

In ähnlicher Weise kann der folgende Code die Rahmenfarbe des Eingabefelds festlegen: #🎜🎜 #

$('input').css('border-color', '#ccc');

#🎜 🎜#

Textfarbe ändern

3. Der Code lautet wie folgt, Sie können die Farbe der im Eingabefeld eingegebenen Zeichen ändern:

$('input').css('color', '#666');

Legen Sie den Bogenmaß des Randkreises fest.

4. Der Code lautet wie folgt, wodurch der Bogen des Eingabefeldrandes vergrößert werden kann:

$('input').css('border-radius', '5px');

#🎜🎜 # 2. Erweiterte Stileinstellungen

Außer Zusätzlich zu den Grundstilen können wir durch einige spezielle Stileinstellungen auch personalisiertere Effekte erzielen.

Schatteneffekt

1. Der folgende Code kann dem Eingabefeld einen Schatteneffekt hinzufügen:

$('input').css('box-shadow', '0 0 4px #999');

#🎜 🎜#Verlaufsfüllung

Der Code lautet wie folgt, Sie können dem Eingabefeld einen Verlaufsfülleffekt hinzufügen:

2. $('input').css('background-image', 'linear-gradient(to bottom, #fff, #f9f9f9)');

Breite festlegen und height

Der Code lautet wie folgt, Sie können die Breite und Höhe des Eingabefelds festlegen:

3. $('input').css('width', '200px');
   $('input').css('height', '30px');

suspendierte Wirkung

Der Code lautet wie folgt. Sie können dem Eingabefeld einen schwebenden Effekt hinzufügen:

4. $('input').hover(function(){
       $(this).css('border-color', '#666');
   }, function(){
       $(this).css('border-color', '#ccc');
   });

Ändern Sie die Schriftart und -größe des Textes

#🎜 🎜#

Der Code lautet wie folgt: Sie können die Schriftart und -größe des in das Eingabefeld eingegebenen Textes ändern:

$('input').css('font-family', 'Arial');
$('input').css('font-size', '14px');

5. 3. Erkennen Sie den dynamischen Effekt des Suchfelds #🎜 🎜#
Abschließend nehmen wir das Suchfeld als Beispiel, um durch jQuery dynamische Effekte zu erzielen. Wenn wir Text in das Suchfeld eingeben, ändern sich die Hintergrundfarbe und die Schriftfarbe.

HTML-Code:

<div class="search-box">
    <input type="text" class="search-input" placeholder="请输入搜索内容">
</div>

jAbfragecode:

$('.search-input').on('input', function(){
    if($(this).val() != ''){
        $(this).css('background-color', '#fff');
        $(this).css('color', '#333');
    }else{
        $(this).css('background-color', '#f6f6f6');
        $(this).css('color', '#ccc');
    }
});

Durch Abhören des Eingabeereignisses des Eingabefelds, wenn ein Wert in der Eingabefeld, ändern Sie die Eingabe. Die Hintergrundfarbe und die Schriftfarbe des Feldes.

Zusammenfassend lässt sich sagen, dass wir mit jQuery problemlos verschiedene Änderungen am Eingabefeldstil implementieren können. Ich glaube, dass Sie durch die Beherrschung der oben genannten Beispiele und Ideen selbst personalisiertere Effekte erzielen und die Qualität des Webdesigns weiter verbessern können.

Das obige ist der detaillierte Inhalt vonjquery fügt Eingabestil hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!