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

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

Supprimez le style de surbrillance :

input:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}

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

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

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

.

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

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!