jquery ajoute un style de saisie

Dans la conception Web, la zone de saisie est l'un des principaux moyens permettant aux utilisateurs de saisir des informations. La beauté de son style affecte directement l'expérience de l'utilisateur. En tant que bibliothèque JavaScript très populaire, jQuery peut nous aider à ajouter et modifier facilement des styles de saisie. Cet article présentera quelques opérations jQuery courantes pour vous aider à améliorer rapidement le style de la zone de saisie.

1. Paramètres de style de base

1. Modifier la couleur d'arrière-plan

Vous pouvez définir la zone de saisie via les éléments suivants code Couleur d'arrière-plan :

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

2. Modifier la couleur de la bordure

De même, le code suivant peut définir la couleur de la bordure de la zone de saisie : #🎜🎜 #

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

Le code est le suivant, vous pouvez changer la couleur des caractères saisis dans la zone de saisie :

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

Le code est le suivant, ce qui peut augmenter l'arc de la bordure de la zone de saisie :

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

Effet d'ombre

1. Le code suivant peut ajouter un effet d'ombre à la zone de saisie :

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

Copier après la connexion

Le code est le suivant, vous pouvez ajouter un effet de remplissage dégradé à la zone de saisie :

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

   Copier après la connexion

Le code est le suivant, vous pouvez définir la largeur et la hauteur de la zone de saisie :

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

   Copier après la connexion

Le code est le suivant, vous pouvez définir la zone de saisie Ajouter un effet flottant :

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

   Copier après la connexion

#🎜 🎜#

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

Copier après la connexion
5. 3. Réalisez l'effet dynamique du champ de recherche #🎜 🎜#
Enfin, nous prenons le champ de recherche comme exemple pour obtenir des effets dynamiques via jQuery. Lorsque nous saisissons du texte dans la zone de recherche, la couleur d’arrière-plan et la couleur de la police changent.

Code HTML :

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

jQuery Code :

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

En écoutant l'événement d'entrée de la zone de saisie, lorsqu'il y a une valeur dans le zone de saisie, modifiez la saisie La couleur d'arrière-plan et la couleur de la police de la boîte.

Pour résumer, nous pouvons utiliser jQuery pour implémenter facilement diverses modifications du style de la zone de saisie. En maîtrisant les exemples et les idées ci-dessus, je pense que vous pouvez obtenir vous-même des effets plus personnalisés et améliorer encore la qualité de la conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!