新人，虚心求教，怎么实现input text点击后周围发光的效果和四个角是圆形_html/css_WEB-ITnose

本帖最后由 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效果不对，遨游完美实现。不过收到启发，自己弄弄看看