CSS如何设计出一个表单页面

发布时间:2022-02-24 14:49:03 作者:小新
来源:亿速云 阅读:137

小编给大家分享一下CSS如何设计出一个表单页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  /*placeholder字体颜色*/

  ::-webkit-input-placeholder{/*WebKitbrowsers*/

  text-align:center;

  color:RGB(154,171,180);

  }

  :-moz-placeholder{/*MozillaFirefox4to18*/

  text-align:center;

  color:RGB(154,171,180);

  }

  ::-moz-placeholder{/*MozillaFirefox19+*/

  text-align:center;

  color:RGB(154,171,180);opacity:1;

  }

  :-ms-input-placeholder{/*InternetExplorer10+*/

  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:1pxsolidrgba(185,198,203,.5);

  box-shadow:002px#ccc;

  }

  同理,input、button等表单项都可以通过这些不常见的属性调整。

  若想在表单项实现如下效果则可以:

  使用伪类给select添加自己想用的图标

  p:after{

  content:"";

  width:14px;

  height:8px;

  background:url(img/xiala.png)no-repeatcenter;

  //通过定位将图标放在合适的位置

  position:absolute;

  right:20px;

  top:45%;

  //给自定义的图标实现点击下来功能

  pointer-events:none;

  }

以上是“CSS如何设计出一个表单页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. frameset标签设计页面
  2. HTML语言——表单设计

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS的list-style-position怎么用

下一篇:CSS怎么设置背景颜色和图像

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》