Maison >interface Web >tutoriel CSS >Exemple de CSS modifiant le style par défaut de la sélection de la liste déroulante
Certains styles de sélection par défaut sont difficiles à modifier, comme le remplacement d'icônes. Voyons ensuite comment modifier ces styles par défaut. J'espère que cet article pourra aider tout le monde.
Le but de l'ajout de l'élément parent p à sélectionner est de couvrir le style sélectionné avec le style de p.
Code CSS :
p{ //用p的样式代替select的样式 width: 200px; height: 40px; border-radius: 5px; //盒子阴影修饰作用,自己随意 box-shadow: 0 0 5px #ccc; position: relative; } select{ //清除select的边框样式 border: none; //清除select聚焦时候的边框颜色 outline: none; //将select的宽高等于p的宽高 width: 100%; height: 40px; line-height: 40px; //隐藏select的下拉图标 appearance: none; -webkit-appearance: none; -moz-appearance: none; //通过padding-left的值让文字居中 padding-left: 60px; } //使用伪类给select添加自己想用的图标 p:after{ content: ""; width: 14px; height: 8px; background: url(img/xiala.png) no-repeat center; //通过定位将图标放在合适的位置 position: absolute; right: 20px; top: 45%; //给自定义的图标实现点击下来功能 pointer-events: none; }
Certains des styles par défaut de select sont difficiles à modifier, comme le remplacement d'icônes. Voyons ensuite comment modifier ces styles par défaut : Code HTML :
Recommandations associées :
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!