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');

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

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

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

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

Schatteneffekt

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

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

Nach dem Login kopieren

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)');

   Nach dem Login kopieren

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');

   Nach dem Login kopieren

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

   Nach dem Login kopieren

#🎜 🎜#

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

Nach dem Login kopieren
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!