您的位置：首页 > 其它

发光输入框

2014-03-23 15:43 218 查看

CSS3 transition 以及 box-shadow实现，要注意的是outline:none;

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body
{
text-align: center;
}
input[type='text']
{
font-size: 14px;
transition: box-shadow linear .2s, border-color linear .2s;
margin-top: 100px;
width: 200px;
padding: 8px;
border: 1px solid #aaaaaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type='text']:focus,input[type='text']:hover
{
outline: none;
box-shadow: 0 0 15px rgba(152,188,235,1.0);
border-color: rgba(152,188,235,1.0)
}
</style>
</head>
<body>
<input type="text" />
</body>
</html>

Demo:

顺便地，把这个样式应用到了下面的评论框中，博客园可以自己提交css，这个特爽

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航