Input元素去除获取焦点时的边框

AnyBisks 2017-11-02

Input元素去除获取焦点时的边框

1.1概述

在网页中,用tab键切换时,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,可以对其进行操作。

注意:这个功能一般是为使用键盘操作的用户准备的,建议一般不要去掉。

input标签获取焦点的时(如:光标放在input框中准备输入值时),input标签外围会出现边框,如果需要去掉这个边框,可以使用css的outline:none;(当元素获得焦点时焦点框为0)属性。

1.2拓展——CSSoutline属性

1、定义

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline是一个简写属性,在一个声明中设置所有的轮廓属性,即可以按顺序设置outline-color、outline-style、outline-width属性。

注意:

1》轮廓线不会占据空间,也不一定是矩形。

2》如果outline不设置outline-color、outline-style、outline-width其中的某个值,也是允许的,比如outline:solid#ff0000;。

3》请始终在outline-color属性之前声明outline-style属性。因为元素只有获得轮廓以后才能改变其轮廓的颜色。

2、浏览器支持

所有浏览器都支持outline属性。

注意:

如果规定了!DOCTYPE,则IE8支持outline属性。

相关推荐