给input文本框和textarea多行文本框添加发光焦点响应特效

问说网 · 发布于 2014-11-06 · 字数1330 · 浏览 3159 · 评论 0

网页里面的表单一般都有文本框,默认的文本框样式确实很难看,谷歌浏览器默认会给获取焦点的文本框添加一个蓝色的发光效果,但是其它浏览器就不会这么干,以前我都是定义为一个样式,这样确实很不利于用户体验,这样用户分不清那个文本框获取了焦点,如果没有文字的那个竖线闪烁的话,那么我们如何在文本框获取焦点的时候添加一个蓝色的发光效果呢?

通过下面的代码可以实现

input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
  
input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

我们来看看效果如何

如果你在这个页面看不到效果,请猛戳这里

项目地址:http://codepen.io/chriscoyier/pen/IgEiz

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-04-02使用Photoshop制作复古残旧逼真的印章
  • 2015-04-17CSS实现两端对齐的3种方法
  • 2016-02-02Calendar-Converter公历和农历互转JavaScript插件
  • 2016-03-30IE6和IE7真的不支持inline-block属性
  • 2016-04-12网页设计中我们为什么要使用960PX宽度
  • 2016-05-16色彩潮流抢先看!2015年网页设计配色新趋势
  • 2016-05-16吐血推荐!300+值得收藏的设计师资源站
  • 2016-06-24分享常用响应式Web UI开发框架
  • 发布评论

    为您推荐

    问说网 · 发布于 2016-02-18

    PostgreSQL安装和使用新手入门

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选。本文介绍PostgreSQL的安装和基本用法,供初次使用者上手。以下内…

    问说网 · 发布于 2016-04-07

    在CSS中使用自定义字体

    CSS 字体属性定义文本的字体系列、大小、加粗、显示风格如斜体和变形如小型大写字母,CSS 字体系列 在 CSS 中,有两种不同类型的字体系列名称。

    autoComplete.js移动端自动补全jQuery插件
    问说网 · 发布于 2016-06-27

    autoComplete.js移动端自动补全jQuery插件

    AutoComplete 是一个 jQuery Mobile 的插件,用于实现在 jQuery Mobile 中的搜索框中提供自动完成的功能。允许开发者添加到您…

    angularAMD使用RequireJS和AngularJS快速构建WebApp
    问说网 · 发布于 2016-07-05

    angularAMD使用RequireJS和AngularJS快速构建WebApp

    angularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web Ap…

    Vincent · 发布于 2016-07-06

    SSH环境搭建

    Struts部分 web.xml中配置: <filter>     <filter-name>struts2</filter-na…

    使用JavaScript脚本将字母转换为摩尔斯电码
    问说网 · 发布于 2016-07-15

    使用JavaScript脚本将字母转换为摩尔斯电码

    摩尔斯电码又译为摩斯密码,是早期通信的主要技术,通过不同的排列顺序来表达不同的英文字母、数字和标点符号,在以前的战争片中经常能够看到使用摩斯密码通信,虽然这种技…

    问说网 · 发布于 2016-08-11

    Python函数参数默认值的陷阱和原理深究

    Python变量区别于其他编程语言的申明&赋值方式,采用的是创建&指向的类似于指针的方式实现的。即Python中的变量实际上是对值或者对象的一个指针(简单的说他…

    问说网 · 发布于 2016-08-11

    关于Relay Log无法自动删除的问题

    通过收集到的信息,综合分析后发现relay-log无法自动删除和以下原因有关,因此建议当slave不再使用时,通过reset slave来取消relaylog,…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13177 文章
    495 评论
    2158 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 4428

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 4659

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 4586

    图片素材

    关注 图片素材

    文章 29463 · 浏览 3645

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3905

    更多 推荐作者

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!