input text 美化

最新推荐文章于 2023-05-13 20:24:02 发布

ginhappy

最新推荐文章于 2023-05-13 20:24:02 发布

阅读量847

点赞数

分类专栏： HTML 文章标签： input border firefox class url css

本文链接：https://blog.csdn.net/ginhappy/article/details/7851029

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果

环境：

firefox 13

代码：

<head>
<style>
*
{
   margin:0; padding:0;
}

body
{
   font-family: Arial, Helvetica;
   background: #c4c4c5 url('images/background.png') top left repeat-x;
   text-align: center;
   color: #222222;
   text-shadow: 0px 1px 0px #fff;
   font-size: 30px;
   font-weight: bold;
   letter-spacing: -2px;
   margin-top: 5%;
}

#content
{
   display: block;
   width: 800px;
   margin-right: auto;
   margin-left: auto;
   text-align: left;
}

label
{
   display: inline-block;
   width: 7em;
}

input
{
   padding: 5px;
   font-size: 15px;
   text-shadow: 0px 1px 0px #fff;
   outline: none;
   background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
   background: -moz-linear-gradient(top, #bcbcbe, #ffffff);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   border: 1px solid #717171;
   -webkit-box-shadow: 1px 1px 0px #efefef;
   -moz-box-shadow: 1px 1px 0px #efefef;
   box-shadow: 1px 1px 0px #efefef;
}

input.image-sprites
{
   padding: 4px 1px 4px 6px;
   height: 27px;
   width: 390px;
   outline: none;
   background: url('images/input.png') top center no-repeat;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0;
   -moz-box-shadow: 0 0 0;
   box-shadow: 0 0 0;
}

input.image-sprites:focus
{
   background: url('images/input.png') bottom center no-repeat;
   -webkit-box-shadow: 0px 0px 0px;
   -moz-box-shadow: 0px 0px 0px;
   box-shadow: 0px 0px 0px;
   height: 27px;
}

input.fail
{
   -webkit-box-shadow: 0px 0px 5px #ff4848;
   -moz-box-shadow: 0px 0px 5px #ff4848;
   box-shadow: 0px 0px 5px #ff4848;
}

input:focus
{
   -webkit-box-shadow: 0px 0px 5px #007eff;
   -moz-box-shadow: 0px 0px 5px #007eff;
   box-shadow: 0px 0px 5px #007eff;
}
</style>
</head>
<body>
<div id="content"> Stylize Input Element Using CSS3 <br/>
<br/>
<label>Image Sprites </label>:<input name="sample" type="text" size="40" class="image-sprites" /><br/><br/>

<label>CSS3 Only </label>:<input name="sample" type="text" size="40" /><br/><br/>

<label>Error Style </label>:<input name="sample" type="text" size="40" class="fail" /><br/><br/>
</div>
</body>