CSS3输入框边框高亮效果

2024-09-05 12:18:56

字体：大中小

来源：转载

供稿：网友

HTML5中使用CSS3实现表单输入框的边框高亮显示效果，鼠标点击输入框的时候，该输入框边框高亮显示，用CSS3可轻易实现这种效果。如果使用不支持HTML5的浏览器，将看不到高亮效果，因此测试时请尽量使用火狐、Chrome或Opera等浏览器。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3输入框边框高亮效果</title><style>*{margin: 0;padding: 0;}body{font-family: Arial, Helvetica;background: #c4c4c5 url('/jscss/demoimg/201310/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('/jscss/demoimg/201310/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('/jscss/demoimg/201310/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;}a, a: visited{color: #000;text-decoration: none;text-shadow: 0px 1px 0px #fff;}a: hover{border-bottom: 1px dotted #fff;}</style></head><body><div id="content">漂亮输入框样式，使用 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/></body></html>

上一篇：HTML5黑客帝国文字下落特效

下一篇：HTML5 Canvas叠加图形+阴影

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注