changement de couleur d'entrée CSS

L'élément de saisie en CSS est l'un des éléments les plus fréquemment utilisés dans les sites Web. Nous voyons souvent diverses zones de saisie dans les formulaires, telles que des zones de texte, des zones radio, des zones de sélection multiple, etc. Cependant, les couleurs par défaut de ces éléments ne répondent pas forcément aux exigences de style de notre site internet, alors comment changer la couleur de l'élément Input ? Cet article présentera diverses méthodes pour changer la couleur des éléments d'entrée.

1. Modifiez la couleur de l'élément Input via CSS

En CSS, nous pouvons utiliser l'attribut background-color pour définir la couleur d'arrière-plan de l'élément Input, comme indiqué ci-dessous :

input{

background-color: #cccccc;

}

Après l'avoir défini ainsi, la couleur de l'élément d'entrée deviendra grise. Nous pouvons également définir d'autres propriétés telles que la couleur du texte, la couleur de la bordure, etc. Par exemple :

input{

background-color: #ffffff;
color: #333;
border: 1px solid #333;

}

Le code ci-dessus signifie définir la couleur d'arrière-plan de l'élément Input sur blanc, la couleur du texte sur gris foncé et la couleur de la bordure sur noir.

2. Modifier la couleur de focus de l'élément d'entrée via CSS

Lorsque l'utilisateur clique sur l'élément d'entrée, nous pouvons également souhaiter modifier sa couleur. À ce stade, vous devez utiliser la pseudo-classe :focus. Par exemple :

input:focus{

background-color: #f8e5a1;
color: #333;
border: 1px solid #333;

}

Après avoir défini cela, lorsque l'utilisateur clique sur l'élément d'entrée, sa couleur d'arrière-plan deviendra jaune et la couleur du texte et la couleur de la bordure ne changeront pas.

3. Modifier la couleur de survol de l'élément Input via CSS

Nous pouvons également utiliser la pseudo-classe :hover pour modifier la couleur lorsque la souris survole l'élément Input. Par exemple :

input:hover{

background-color: #f5f5f5;

}

Après avoir défini cela, lorsque la souris survole l'élément d'entrée, sa couleur d'arrière-plan deviendra gris clair.

4. Modifiez les couleurs des différents types d'éléments d'entrée via CSS

Différents types d'éléments d'entrée incluent les zones de texte, les zones radio, les zones de sélection multiple, les boutons, etc. Nous pouvons utiliser différents sélecteurs CSS pour sélectionner différents types d'éléments d'entrée, puis modifier leurs couleurs. Par exemple :

input[type="text"]{

background-color: #ffffff;
color: #333;
border: 1px solid #ccc;

}

Le code ci-dessus signifie sélectionner l'élément d'entrée du type de zone de texte, définir sa couleur d'arrière-plan sur blanc, la couleur du texte sur gris foncé et la couleur de la bordure. au gris clair.

input[type="checkbox"]{

/*设置复选框的颜色*/

}

input[type="radio"]{

/*设置单选框的颜色*/

}

input[type="submit"]{

/*设置提交按钮的颜色*/

}

5. JavaScript modifie la couleur des éléments d'entrée

En plus du CSS, nous pouvons également utiliser JavaScript pour modifier dynamiquement la couleur des éléments d'entrée. Par exemple, lorsque vous cliquez sur un bouton, modifiez la couleur d'arrière-plan de la zone de texte en rouge. Vous pouvez utiliser le code suivant pour y parvenir :

//Obtenir l'élément bouton
var btn = document.getElementById("btn");
//Obtenir l'élément zone de texte
var text = document.getElementById("text" );
//Événement de clic de liaison de bouton Give
btn.onclick = function(){

text.style.backgroundColor = "#ff0000";

}

La modification dynamique de la couleur de l'élément d'entrée via JavaScript est très flexible, mais il convient de noter que cela peut affecter les performances de la page . Par conséquent, vous devez réfléchir attentivement lorsque vous utilisez JavaScript pour modifier la couleur des éléments d'entrée.

Résumé

Grâce aux méthodes ci-dessus, nous pouvons facilement changer la couleur de l'élément d'entrée. Vous pouvez définir la couleur par défaut, la couleur de mise au point, la couleur de survol, etc. dans CSS, ou utiliser différents sélecteurs CSS pour sélectionner différents types d'éléments d'entrée. Vous pouvez également utiliser JavaScript pour obtenir une modification des couleurs plus flexible. J'espère que cet article vous sera utile.

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!