怎样运用CSS设想出一个表单页面（附示例）【html5教程】,html5,css,html,javascript

本篇文章给人人带来的内容是关于怎样运用CSS设想出一个表单页面（附示例），有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。

近来做项目总能碰到林林总总，光怪陆离的需求。用bootstrap等ui框架不能满足客户需求。只能开动本身头脑，本身写一些款式。

• 怎样调解input款式（包含placeholder字体款式）

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

• 修正表单项款式

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

• 同理，input、button等表单项都能够经由过程这些不常见的属性调解。

• 若想在表单项完成以下结果则能够：

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

• 另有一个要点，要想使select完成相似placeholder结果,则能够设置selected disabled dispaly:none;

<option value="placeholder" disabled selected style="display:none">挑选单元</option>

• 总结

此次处理的也不是什么困难，然则确切会消费一点时候，所以我写下了，好记性不如烂笔头。
附下github地点，留下关于我写的登录注册。

以上就是怎样运用CSS设想出一个表单页面（附示例）的细致内容，更多请关注ki4网别的相干文章！