为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式

目录

1、为Input输入框添加圆角并去除阴影

2、去除获得焦点时方角样式

 

内容

1、为Input输入框添加圆角并去除阴影

  1.1 border-radius不同浏览器下兼容设置:

.boder-radius{
     -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome、safari等)
     -moz-border-radius:6px;//适配firefox浏览器
     -ms-border-radius:6px;//适配IE浏览器
     -o-border-radius:6px;//适配opera浏览器
     border-radius:6px;//适配所有浏览器(需要放在最后面,类似于if..else if..else..)
}

  1.2 去除阴影

  在我们为input输入框设置圆角值时,一般情况下会出现向内部凹陷的阴影,这个时候我们只需要为input输入框设置一个border值即可

技术分享

border: 1px solid #DBDBDB;

  最后的结果如下所示:

技术分享

2、去除获得焦点时方角样式

  input设置圆角值之后,在聚焦的时候会出现外边框

技术分享

  只需要加上代码 outline:none;即可消除聚焦时的外边框

 

文章来自:http://www.cnblogs.com/leijing0607/p/7509317.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3