•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

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

摘要: 本篇文章给人人带来的内容是关于怎样运用CSS设想出一个表单页面(附示例),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。近来做项目总能碰到林林总总,光怪陆离的需求。用boots...
本篇文章给人人带来的内容是关于怎样运用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网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号