Comment concevoir une page de formulaire en utilisant CSS (avec exemples)

Le contenu de cet article explique comment utiliser CSS pour concevoir une page de formulaire (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, lorsque je réalise des projets, je rencontre toujours des demandes diverses et étranges. L'utilisation de frameworks d'interface utilisateur tels que bootstrap ne peut pas répondre aux besoins des clients. Vous ne pouvez utiliser que votre propre cerveau et écrire vous-même certains styles.

• Comment ajuster le style de saisie (y compris le style de police des espaces réservés)

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-align: center;
    color:RGB(154,171,180) !important;
}

• Modifier le style des éléments de formulaire

select{
 /*清除select的边框样式*/
    border: none;
 /*清除select聚焦时候的边框颜色*/
    outline: none;
 /*隐藏select的下拉图标*/
    appearance: none;
 /*通过padding-left的值让文字居中*/
    padding-left: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 370px;
    line-height: 41px;
    height: 41px;
    border-radius: 20px;
    border:1px solid rgba(185,198,203,.5);
    box-shadow: 0 0 2px #ccc;
}

• De même, les éléments de formulaire tels que la saisie et le bouton peuvent être ajustés grâce à ces attributs inhabituels.

• Si vous souhaitez obtenir les effets suivants dans les éléments du formulaire :

使用伪类给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;
}

• Il y a un autre point important. Si vous souhaitez obtenir un effet de type espace réservé sur la sélection, vous pouvez définir l'affichage désactivé sélectionné :

<option>选择单位</option>

---

• Résumé

Ce que j'ai résolu cette fois n'est pas un problème difficile, mais cela prend du temps, alors je l'ai écrit. Un bon souvenir n’est pas aussi bon qu’une mauvaise écriture.

Ci-joint l'
adresse github, et laissez les informations de connexion et d'enregistrement que j'ai écrites.

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!