How to design a form page using CSS (with examples)

The content of this article is about how to use CSS to design a form page (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recently, when doing projects, I always encounter various and strange demands. Using UI frameworks such as bootstrap cannot meet customer needs. You can only use your own brain and write some styles yourself.

• How to adjust the input style (including placeholder font style)

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

• Modify the form item style

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

• Similarly, form items such as input and button can be adjusted through these uncommon attributes.

• If you want to achieve the following effect in the form item:

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

• There is another important point. If you want to make select achieve a placeholder-like effect, you can set selected disabled dispaly:none;

<option>选择单位</option>

---

• Summary

The solution this time is not a difficult problem, but it does take a little time, so I wrote it down. A good memory is not as good as a bad writing.
Attached is the github address, please leave the login and registration information I wrote.

The above is the detailed content of How to design a form page using CSS (with examples). For more information, please follow other related articles on the PHP Chinese website!