下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:悦耳pn     来源: https://www.cnblogs.com/677a/p/11726982.html点击数:1460发布时间: 2020-03-09 10:03:06

标签: 图像inputCSS

Web开发

  <input>标签用于搜集用户信息。根据不同的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。

  <input>标签可定义输入域的开始,在其中用户可输入数据。

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

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

赞(13)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程