提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样运用CSS设想出一个表单页面(附示例)【css教程】,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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

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

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线