千家信息网

如何使用css样式制作好看的表单样式

发表于:2025-01-16 作者:千家信息网编辑
千家信息网最后更新 2025年01月16日,小编给大家分享一下如何使用css样式制作好看的表单样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!form代码:Name
千家信息网最后更新 2025年01月16日如何使用css样式制作好看的表单样式

小编给大家分享一下如何使用css样式制作好看的表单样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  form代码:

  

  

  

  Name

  

  

  

  E-mail

  

  

  

  Website

  

  

  

  

  

  

  

  

  css样式代码:

  input,textarea{

  padding:9px;

  border:solid1px#E5E5E5;

  outline:0;

  font:normal13px/100%Verdana,Tahoma,sans-serif;

  width:200px;

  background:#FFFFFFurl('bg_form.png')lefttoprepeat-x;

  background:-webkit-gradient(linear,lefttop,left25,from(#FFFFFF),color-stop(4%,#EEEEEE),to(#FFFFFF));

  background:-moz-linear-gradient(top,#FFFFFF,#EEEEEE1px,#FFFFFF25px);

  box-shadow:rgba(0,0,0,0.1)0px0px8px;

  -moz-box-shadow:rgba(0,0,0,0.1)0px0px8px;

  -webkit-box-shadow:rgba(0,0,0,0.1)0px0px8px;

  }

  textarea{

  width:400px;

  max-width:400px;

  height:150px;

  line-height:150%;

  }

  input:hover,textarea:hover,

  input:focus,textarea:focus{

  border-color:#C9C9C9;

  -webkit-box-shadow:rgba(0,0,0,0.15)0px0px8px;

  }

  .formlabel{

  margin-left:10px;

  color:#999999;

  }

  .submitinput{

  width:auto;

  padding:9px15px;

  background:#617798;

  border:0;

  font-size:14px;

  color:#FFFFFF;

  -moz-border-radius:5px;

  -webkit-border-radius:5px;

  }



以上是"如何使用css样式制作好看的表单样式"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0