常见input输入框点击发光白色外阴影 focus

先看看具体实现的效果第一就是点击input 实现的效果默认谷歌点击input是蓝色边框去掉用outline:0; 实现效果用focus 默认状态的边框颜色一般较重如border:1px solid #d8d8d8 ; 背景色background:#fcfcfc; 还有边角圆形border-radus:0.35em;

focus点击给一个阴影 box-shadow ; border background都是白色

input:focus{outline:0; box-shadow:0 0 5px #ccc; border-color:#fff; background:#fff;}

实例

 <p class="field"> <input id="name" name="name" type="text" placeholder="用户名" class="user-name"></p>

CSS

 .field input{width: 85%;height: 2.5em;//input高度margin-top: 2%;border: 1px solid #d8d8d8;background: #fcfcfc;line-height: 2em;border-radius:0.45em;}/*鼠标点中input*/.field input:focus{-webkit-box-shadow: 0 0 5px #ccc;/*点击input 外阴影*/-moz-box-shadow:0 0 5px #ccc;box-shadow: 0 0 5px #ccc;border-color:#fff ;/*黑色边框改为白色*/outline:0;/*去掉默认谷歌点击input边框显示蓝色  */background: #fff;/*input内背景为白色*/}

转载于:https://www.cnblogs.com/xxx91hx/p/4597732.html

常见input输入框点击发光白色外阴影 focus相关推荐

input输入框点击变大缩小的js代码
一.input输入框点击变大缩小的js代码 html中 <style type="text/css"> input[type='text'] {width: 100px ...
html获取文本框中的文字,JavaScript实现input输入框点击获取文字内容
Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验. input输入框获取js点击文字内容 .c{ wi ...
input输入框点击回车切换到下一个输入框功能
直接上代码: HTML: <form class="layui-form" action="../in" id="form" meth ...
为input输入框添加圆角并去除阴影
<input type="text" name="bianhao" value="" placeholder="请输入商品编 ...
input输入框在移动端点击有阴影解决方法
input输入框在移动端点击有阴影解决方法参考文章: (1)input输入框在移动端点击有阴影解决方法 (2)https://www.cnblogs.com/dingjiujiu/p/6694332 ...
点击底部input输入框，弹出的软键盘挡住input（苹果手机使用第三方输入法）
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤起软 ...
css实现发光的input输入框
css实现发光的input输入框鉴于前期工作总结,简单总结一下开发中经常遇到的发光的输入框的UI视觉体验. 聚焦input文本框:边框外围背景伴有明显的动画效果,呈现为虚化,雾化效果. 效果图截图: ...
解决默写浏览器中点击input输入框时，placeholder的值不消失的方法
解决默写浏览器中点击input输入框时,placeholder的值不消失的方法参考文章: (1)解决默写浏览器中点击input输入框时,placeholder的值不消失的方法 (2)https:// ...
element 输入框点击事件_Element Input输入框的使用方法
本文来源于Element官方文档: 基础用法带图标的输入框(属性方式) placeholder="请选择日期" suffix-icon="el-icon-date&qu ...
input/textarea 输入框点击有边框解决方法
input/textarea 输入框点击出现类似以下的默认边框第一种方法(直接添加样式) input{outline: none;} 第二种方法(控制聚焦时不出现边框) input:focus{ou ...

常见input输入框点击发光白色外阴影 focus

常见input输入框点击发光白色外阴影 focus相关推荐

最新文章

热门文章

常见input输入框 点击 发光白色外阴影 focus

常见input输入框 点击 发光白色外阴影 focus相关推荐

最新文章

热门文章

常见input输入框点击发光白色外阴影 focus

常见input输入框点击发光白色外阴影 focus相关推荐