Comment styliser un élément d'entrée en utilisant CSS

CSS est un langage utilisé pour styliser les pages Web. Il peut nous aider à obtenir divers effets sur les pages Web. Dans le développement Web, les formulaires sont des éléments très courants et la saisie est l’un des contrôles les plus élémentaires du formulaire. Dans cet article, nous verrons comment styliser les éléments d'entrée à l'aide de CSS.

1. Style de la zone de saisie

1. Largeur et hauteur

Grâce à CSS, nous pouvons facilement définir la largeur et la hauteur de la zone de saisie. Vous pouvez utiliser les attributs width et height pour définir la taille de la zone de saisie, comme suit :

input[type="text"] {
width: 200px;
height: 30px;
}

2. border style

border est l'un des éléments les plus couramment utilisés dans les styles de zone de saisie. La propriété border peut être utilisée pour définir le style de bordure de la zone de saisie.

Par exemple, le code suivant définit la bordure de la zone de saisie sur une ligne continue, une largeur de 1 pixel et une couleur grise :

input[type="text"] {
border: 1px solid #aaa;
}

Nous pouvons également définir la bordure sur invisible afin que la zone de saisie n'ait aucune bordure :

input[type="text"] {
border: none;
}

3. coins arrondis et ombre

via Avec CSS, nous pouvons également définir les coins arrondis et l'ombre de la zone de saisie. Par exemple, le code suivant définira les coins arrondis de la zone de saisie sur 5 pixels et l'effet d'ombre :

input[type="text"] {
border-radius: 5px;
box-shadow: 0 0 5px rgba( 0,0 ,0,0.5);
}

4. Style de zone de texte

Nous pouvons également personnaliser la zone de texte de l'élément de saisie. Par exemple, vous pouvez définir la couleur d'arrière-plan et la taille de la police de la zone de texte, ainsi que la couleur du texte saisi. Voici un exemple :

input[type="text"] {
font-size: 16px;
color: #333;
background-color: #f2f2f2;
}

2. Cases radio et cases à cocher Style

En plus des zones de saisie de texte, les boutons radio et les cases à cocher sont également des éléments fréquemment utilisés dans les formulaires. Nous pouvons les embellir grâce à CSS pour obtenir une meilleure expérience utilisateur.

1. Modification de l'apparence

L'apparence des boutons radio et des cases à cocher est généralement rendue par le style par défaut du navigateur. Cependant, en utilisant CSS, nous pouvons modifier ces contrôles en fonction de nos besoins.

Tout d'abord, nous devons ajouter les règles CSS suivantes pour modifier l'apparence des boutons radio et des cases à cocher :

input[type="radio"], input[type="checkbox"] {
-webkit-owned: none;
-apparence moz : aucune ;
apparence : aucune ;
bordure : 1px solide #ccc ;
rayon de bordure : 50 % ;
largeur : 16 px ;
hauteur : 16px ;
contour : aucun ;
transition : tous 0,3 s easy-in-out ;
}

Ce code masquera les styles de boutons radio et de cases à cocher par défaut du navigateur et les changera en formes rondes.

2. Couleur et animation

Nous pouvons également embellir davantage les cases radio et les cases à cocher en modifiant leurs effets de couleur et d'animation.

Le code suivant définira quelques effets d'animation simples pour les boutons radio et les cases à cocher :

input[type="radio"]:checked, input[type="checkbox"]:checked {
background-color : #000;
border-color : #000 ;
transition : toutes les 0,3 secondes d'entrée et de sortie faciles ;
}

Ce code ajoutera une simple couleur d'arrière-plan et une bordure lorsque le bouton radio et la case à cocher sont sélectionnés. La couleur change.

3. Style de bouton

Le bouton est l'un des éléments les plus couramment utilisés dans les formulaires. Le style du bouton par défaut semble souvent très démodé, mais grâce au CSS, nous pouvons facilement modifier la couleur, la police, la taille et d'autres attributs du bouton.

1. Couleur des boutons

Nous pouvons embellir les boutons en modifiant leur couleur d'arrière-plan et leur couleur de police. Le code suivant ajoutera un effet de dégradé de couleur d'arrière-plan lorsque le bouton est survolé :

button {
background: Linear-gradient(#3180b8, #1e68a2);
border: none;
border-radius: 3px;
color: # fff;
curseur : pointeur ;
taille de la police : 16 px ;
remplissage : 8px 16px;
transition : toutes les facilités de 0,3 s ;
}

bouton : survol {
arrière-plan : dégradé linéaire (#1e68a2, #3180b8) ;
}

2. Taille et police du bouton

Nous pouvons également modifier la taille et la police du bouton pour lui donner un aspect plus moderne. Le code suivant augmentera la taille du texte du bouton et le rendra en gras :

button {
font-size: 18px;
font-weight: bold;
padding: 10px 24px;
}

Conclusion

En développement web , Les éléments de formulaire sont très courants. Le style de ces éléments peut être facilement modifié à l’aide de CSS pour les rendre plus modernes et plus beaux. Cet article explique comment utiliser CSS pour styliser les éléments d'entrée. Lorsque nous rédigeons un formulaire, nous pouvons personnaliser l'apparence des éléments du formulaire en fonction de nos besoins et préférences en utilisant les méthodes décrites dans cet article.

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!