视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
新人,虚心求教,怎么实现inputtext点击后周围发光的效果和四个角是圆形_html/css_WEB-ITnose
2020-11-27 16:31:34 责编:小采
文档


本帖最后由 pl02206984 于 2013-05-10 11:41:08 编辑

新人,虚心求教,怎么实现input text点击后周围发光的效果和四个角是圆形,用outline?四个角用图片?但是用了效果不佳啊,我想要发光的效果,就是边框淡淡的发光,但是outline无法做到渐变色,所以虚心求教给位大神。最好是多浏览器支持的。
效果图如下:


回复讨论(解决方案)

把input的边框隐藏,给input用背景图样式,得到焦点与失去焦点分别用两个有背景图样式的CLASS进行切换。(提示背景图可以画成圆角的,与发光的边,或任意你想得到的效果)

简单点弄gif图片上面叠一个input

随意套用一个input
以下是css:
input {
display: inline-block;
width: 210px;
margin-bottom: 9px;
line-height: 18px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

随意套用一个input
以下是css:
input {
display: inline-block;
width: 210px;
margin-bottom: 9px;
line-height: 18px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
谢谢了,不过这个我测试了一下,对IE9无效,chrome效果不对,遨游完美实现。不过收到启发,自己弄弄看看

下载本文
显示全文
专题