Input元素去除获取焦点时的边框
1.1概述
在网页中,用tab键切换时,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,可以对其进行操作。
注意:这个功能一般是为使用键盘操作的用户准备的,建议一般不要去掉。
input标签获取焦点的时(如:光标放在input框中准备输入值时), input标签外围会出现边框,如果需要去掉这个边框,可以使用css的outline:none;(当元素获得焦点时焦点框为0)属性。
1.2拓展——CSS outline属性
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 属性。
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4105html框架之iframe和frame及f ... -
Select下拉选择框的美化
2017-11-02 17:19 3181Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1567Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1554Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1100input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3386html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 872HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1606html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 556html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1089html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 786Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6214HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16042div元素按比例缩放的实现方法 某些场景下,窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1095HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2329HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1017RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 622Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 764DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1436HTML引入CSS样式的方式详解 1.1内联属性(Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4885设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点,请看附件,已经正常使用。 请放心下载
element input输入框自动获取焦点的实现 最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。 但是,element并不支持autofocus属性,那就只能通过...
下面小编就为大家带来一篇jquery获取form表单input元素值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 兼容ios8 ios9 ios 10
Input元素的type属性 Input元素 01 Input元素 普通文本框 密码文本框 按钮 Input元素 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 ...
input边框变色,这个教程由小编亲自整理,亲测有效实用。当用户在输入框输入账号密码或文本时,边框颜色发生变化,边框变蓝、黄色等。需要的小伙伴赶快下载吧,本方法简单实用,输入框输入时边框颜色变化实用教程!
autofocus属性用于指定页面加载后是否自动获取焦点,将标记的属性值指定为true时,表示页面加载完毕后会自动获取该焦点。 语法格式 <input type="控件类型" autofocus="true" /> 示例 form属性 <input form="login...
1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin...
本篇文章主要是对文本框(input)获取焦点(onfocus)时样式改变的示例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
1、使用Chrome的都知道,当鼠标焦点在input、textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,outline这个属性。 你可以用下面的css代码...
主要介绍了解决input获取焦点时底部菜单被顶上来问题的方法,非常不错,具有参考借鉴价值,需要的的朋友参考下
下面小编就为大家带来一篇jquery实现input框获取焦点的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
非常全面的google虚拟键盘插件,一键安装并使用,能获取页面上所有的input标签,并自动弹出
下面小编就为大家带来一篇jquery实现input框获取焦点的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html表单form元素+各种input元素+常用元素综合案例.
textbox文本框获取焦点弹出日历,这个是我在做项目的时候找到的,使用起来很方便,如果数据库字段也是日期型,在按照日期排序时就方便了!
NULL 博文链接:https://bijian1013.iteye.com/blog/2392443
本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,...