La boîte d'entrée d'entrée est un composant indispensable des pages Web, mais chaque navigateur a différents styles d'affichage des boîtes d'entrée.
Par exemple:
L'image ci-dessus est la boîte d'entrée fournie avec Google Chrome et IE Browser, et le style n'est pas satisfaisant, donc la plupart d'entre eux écriront les styles eux-mêmes.
Voici un style de zone de texte simple
entrée {Border: 1Px Solid #ccc; rembourrage: 7px 0px; Border-Radius: 3px; / * l'attribut CSS3 IE ne prend pas en charge * / padding-left: 5px; } Image de reproduction:
Signification d'attribut de style:
Border: 1px solide #ccc; / * Définissez la bordure de la boîte d'entrée, la couleur, la taille et les lignes pointillées solides de la ligne de bord * /
rembourrage: 7px 0px; / * Définissez la hauteur de la boîte d'entrée, vous pouvez également utiliser la hauteur, mais si vous utilisez la hauteur, le curseur de la boîte d'entrée sera placé sur le dessus et d'autres styles doivent être réglés pour le réparer, et il peut ne pas être compatible.
Border-Radius: 3px; / * La pierre de propriété à l'intérieur de CSS3, c'est-à-dire ne prend pas en charge * /
padding-gauche: 5px; / * Laissez l'annonce à 5 pixels de la gauche, et au début, le curseur est fixé au bord de la boîte d'entrée à gauche * /
Fondamentalement, les styles ci-dessus sont plus couramment utilisés de nos jours, puis quelques autres paramètres d'entrée
Par exemple: attribut l'espace réservé
Cette propriété a un effet texte rapide dans la zone d'entrée. La propriété CSS3 ne prend pas en charge IE
Entrée Cliquez pour lutter contre l'effet spécial:
entrée {Border: 1Px Solid #ccc; rembourrage: 7px 0px; Border-Radius: 3px; padding-gauche: 5px; -Webkit-box-shadow: inset 0 1px 1px rgba (0,0,0, .075); Box-shadow: inset 0 1px 1px rgba (0,0,0, .075); -Webkit-Transition: Border-Color Ease-in-out.15S, -Webkit-Box-Shadow Ease-in-out.15S; -O-Transition: Border-Color Ease-in-Out.15S, Box-Shadow Facit-in-Out .15S; Transition: Border-Color Ease-in-Out .15S, Box-Shadow Facit-in-Out .15S} Entrée: Focus {Border-Color: # 66AFE9; Aperçu: 0; -webkit-box-shadow: inset 0 1px 1px rgba (0,0,0, .075), 0 0 8px rgba (102 175 233, .6); Box-shadow: encadré 0 1px 1px rgba (0,0,0, .075), 0 0 8px rgba (102,175,233, .6)} Image de reproduction: