Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser CSS pour supprimer le style par défaut attribué par le navigateur au formulaire

PHPz
Libérer: 2017-04-02 10:39:42
original
1639 Les gens l'ont consulté

Lorsque nous écrivons un formulaire, nous constatons que certains navigateurs attribuent des styles par défaut au formulaire. Par exemple, dans le navigateur Chrome, la zone de texte et la zone de sélection déroulante auront des bordures lumineuses lorsqu'elles chargeront le focus, et dans Firefox et Google Chrome, la zone de texte multilignezone de texte peut être librement glissée et agrandie. De plus, sous IE10, lorsque du contenu est saisi dans la zone de texte, une petite croix apparaîtra sur le côté droit. de la zone de texte. Fork, attendez. Il ne fait aucun doute que ces effets ont amélioré l’expérience utilisateur, mais parfois nous n’avons pas besoin de ces styles par défaut, alors que devons-nous faire ? Jetons un coup d'œil aux solutions séparément.

1. Supprimez la bordure lumineuse par défaut des zones de texte dans Chrome et d'autres navigateurs

input:focus, textarea:focus {
    outline: none;
}
Copier après la connexion

Supprimez le style de surbrillance :

input:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}
Copier après la connexion

Bien sûr, après cela, lorsque la zone de texte charge le focus, les bordures des zones de texte sous tous les navigateurs ne changeront pas de couleur ou de style, mais nous pouvons la redéfinir en fonction de nos propres besoins, par exemple comme :

input:focus,textarea:focus {
    outline: none;
    border: 1px solid #f60;
}
Copier après la connexion

Dans ce cas, lorsque la zone de texte charge le focus, la couleur de la bordure passe à l'orange, donnant un retour à l'utilisateur.

2. Supprimez la petite croix derrière la zone de texte du navigateur IE10+

Juste la phrase suivante est ok

input::-ms-clear {
    display: none;
}
Copier après la connexion

3. la zone de texte de la zone de texte multiligne

et ajoutez l'attribut comme indiqué ci-dessous. La zone de texte multiligne ne peut pas être agrandie ou réduite en faisant glisser :

textarea {
    resize: none;
}
Copier après la connexion

.

Il y a un attribut de redimensionnement à mentionner ici. Il s'agit d'un attribut CSS3 utilisé pour la mise à l'échelle des éléments. Il peut prendre les valeurs suivantes :

aucun. les deux, ce qui permet les directions horizontales et verticales. Zoom

horizontal permet uniquement la mise à l'échelle horizontale

vertical permet uniquement la mise à l'échelle verticale


Non seulement pour les éléments de zone de texte, mais aussi pour la plupart des éléments, tels que divs, etc., je ne les listerai pas un par un ici, mais contrairement à textarea, vous devez ajouter la phrase

overflow

: auto lors de l'utilisation de div, c'est-à-dire que cela le fera; avoir pour effet :

div {
    resize: both;
    overflow: auto;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!