CSS技巧:四步实现会发光的输入框input

2018-02-0316:41:09网页制作Comments4,621 views字数 1349阅读模式

CSS技巧:四步实现会发光的输入框input文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

通过input标签创建一个输入框后,当用鼠标点击输入框会发现输入框外围边框会变色且会变得模糊,这是因为浏览器的默认样式在捣蛋,接下来我们自定义focus样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

实现上述效果需要4个步骤

  1. 取消浏览器默认样式outline。
  2. 设置边框样式、宽度、颜色。
  3. 设置边框阴影。
  4. 渐变过渡效果

取消浏览器默认样式outline

以谷歌浏览器为例,当focus input输入框时浏览器会设置outline: -webkit-focus-ring-color auto 5px;,轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。这就是为什么当我们什么都没做的时候input focus时外围边框也会发光,取消浏览器默认样式outline:0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

设置边框样式、宽度、颜色

这个so easy了,border: 1px solid #f95d5d;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

设置边框阴影

设置边框阴影使用CSS3 box-shadow,语法:box-shadow: h-shadow v-shadow blur spread color inset;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

属性
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。

设置边框阴影box-shadow: 0px 0px 10px 0px #f95d5d;
完整CSS代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

input:focus{
    outline: 0;
    border: 1px solid #f95d5d;
    box-shadow: 0px 0px 10px 0px #f95d5d;
  }

渐变过渡效果

当input focus时我们还想要边框和阴影渐变,用CSS3 transition可以实现,Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

transition有四个属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

属性
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。

了解了box-shadow后在input中添加transition: border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;即可实现想要的效果了。为了兼容Safari和老版本firefox,加上两行兼容性代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html

-moz-transition:border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
-webkit-transition:border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/562.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/562.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定