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

#🎜 🎜#

Modifier la couleur du texte

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

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

Définissez le cercle de bordure Radian

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

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

#🎜🎜 # 2. Paramètres de style avancés

Sauf En plus des styles de base, nous pouvons également obtenir des effets plus personnalisés grâce à certaines méthodes de configuration de style spéciales.

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

#🎜 🎜#Gradient Fill

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

Définir la largeur et height

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

effet suspendu

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

Modifier la police et la taille du texte

#🎜 🎜#

Le code est le suivant, vous pouvez modifier le type de police et la taille du texte saisi dans la zone de saisie :

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

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!