5 codes de personnalisation CSS à connaître absolument

Lors de la création de pages, vous rencontrez souvent le besoin de personnaliser le comportement par défaut de certaines balises (comme les espaces réservés de saisie, etc.), mais les CSS de ces paramètres par défaut sont généralement difficiles à retenir, il est donc nécessaire de le faire Enregistrez-vous. Vous trouverez ci-dessous quelques CSS que j'utilise souvent pour réinitialiser le comportement par défaut.

1. Espace réservé

Lors de la définition de l'attribut espace réservé dans la balise d5fd7aea971a85678ba271703566ebfd Taille, vous pouvez utiliser le css suivant :

// firefox
input::-moz-placeholder {
    color: red;
    font-size: 18px;
  }
// IE
input:-ms-input-placeholder {
  color: red;
  font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
  color: red;
  font-size: 18px;
}

Il est à noter que différents navigateurs ont des méthodes d'écriture différentes :

doit être ajouté avec le préfixe de chaque navigateur (comme -webkit - );

Il n'y a pas d'entrée- devant l'espace réservé de Firefox ;

Firefox et Chrome ont tous deux : deux points, tandis qu'IE en a un : ; différentes méthodes d'écriture ;

2. Un petit triangle apparaîtra dans la liste déroulante

balise de sélection. Habituellement, je supprimerai ce petit triangle ou utiliserai une image d'arrière-plan. celui qui répond aux exigences. Supprimez le CSS du petit triangle :

Il n'existe actuellement aucun moyen de supprimer le petit triangle dans le

navigateur IE

-webkit-appearance: none; -moz-appearance: none;

.

3. Les doubles flèches à droite de input[type=number]

nput[type=number] sont généralement utilisées sur les appareils mobiles. Le navigateur reconnaîtra le type de saisie du numéro, puis changera. le clavier numérique pour s'y habituer. Mais des spinners apparaîtront, généralement vous n'en avez pas besoin. Le CSS pour supprimer les spinners est le suivant :

4. -webkit-tap-highlight-color

// firefox
input[type='number'] {
  -moz-appearance:textfield;
}
// chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Sur les navigateurs mobiles (tels que les navigateurs intégrés WeChat et QQ), lorsque vous cliquez Lorsqu'un lien ou un élément cliquable défini via

Javascript

apparaîtra, une bordure bleue apparaîtra. Je déteste cette bordure, donc je la supprime généralement :

sera haute. Définissez la couleur vive sur transparente afin que la bordure bleue ne soit pas visible.

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

5. Barre de défilement

WebKit prend désormais en charge les styles personnalisés de barres de défilement pour les zones avec des attributs de débordement, les zones de liste, les menus déroulants et les zones de texte. Il est parfois nécessaire de supprimer la barre de défilement, notamment lorsqu'il y a plusieurs barres de défilement sur la page :

Réglez la largeur de la barre de défilement à 0 pour supprimer la barre de défilement. Si vous devez personnaliser le style de la barre de défilement, vous pouvez cliquer sur www.xuanfengge.com/css3-webkit-scrollbar.html, qui explique comment personnaliser le style de la barre de défilement.

::-webkit-scrollbar {
  width: 0;
}

Ce qui précède enregistre les codes CSS que j'utilise couramment dans des projets qui ne sont pas faciles à retenir. Si vos amis ont également des codes CSS plus couramment utilisés et difficiles à retenir, n'hésitez pas à les ajouter.

【Recommandations associées】

1.

Tutoriel vidéo CSS en ligne gratuit

2. Manuel CSS en ligne

3. php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

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!