web前端：input获得焦点时，如何让外边框不变蓝

作者:悦耳pn 更新于： 2020-03-05 21:34:42

　　标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

　　border可应用于几乎所有有形的html元素，而outline是针对链接、表单控件和ImageMap等元素设计。

　　outline的效果将随元素的focus而自动出现，相应的随blur而自动消失。这些都是浏览器的默认行为，无需Javascript配合css来控制。outline不会像border那样影响元素的尺寸或者位置。

　　使用input:focus{outline:none;},可以达到“输入框”获得焦点时边框不变蓝的效果。这个效果也可以使用在button上，button:focus{outline:none;}。

　　但是在Firefox下，对于类型为button的元素，即使设置outline，也还是会出现虚线。可以使用一个Firefox的私有伪元素：

　　button:-moz-focus-inner{border:0;}，

　　特别注意的是-moz-focus-inner设置的不是outline,而是设置border。

　　标签可定义输入域的开始，在其中用户可输入数据。

　　对于大量通常的表单控件，可以使用标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。

　　虽然标签中有许多属性，但是对每个元素来说，只有type属性和name属性是必需的(提交或重置按钮只有type属性)。