如何删除输入文本元素上的边框突出显示
当一个HTML元素被“聚焦”(当前被选中/标签入)时,许多浏览器(至少是Safari和Chrome)会在其周围放置一个蓝色边框。
对于我正在处理的布局,这会分散注意力,看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox似乎没有这样做,或者至少可以让我通过以下方式控制它:
border: x;
如果有人可以告诉我IE的性能,我会很好奇。
让Safari消除这点闪光会很好。
#1楼
这是一个旧线程,但是作为参考,必须注意,不建议禁用输入元素的轮廓,因为这会妨碍可访问性。
outline属性的存在是有原因的-为用户提供键盘焦点的清晰指示。 有关此主题的更多信息和其他资源,请访问http://outlinenone.com/
#2楼
对于您的情况,请尝试:
input.middle:focus {outline-width: 0;
}
或一般而言,影响所有基本表单元素:
input:focus,
select:focus,
textarea:focus,
button:focus {outline: none;
}
在评论中, 诺亚·惠特莫尔 ( Noah Whitmore)建议更进一步,以支持将contenteditable
属性设置为true
元素(有效地使其成为一种输入元素)。 以下内容也应该针对这些对象(在支持CSS3的浏览器中):
[contenteditable="true"]:focus {outline: none;
}
尽管我不建议这样做,但出于完整性考虑,您始终可以使用以下命令禁用所有内容的焦点轮廓:
*:focus {outline: none;
}
请记住,焦点轮廓是可访问性和可用性功能; 它会提示用户当前所关注的元素。
#3楼
使用此代码:
input:focus {outline: 0;
}
#4楼
当焦点位于元素上时,使用以下CSS属性删除轮廓:
input:focus {outline: 0;
}
此CSS属性删除焦点上所有输入字段的轮廓,或使用伪类通过下面的CSS属性删除元素的轮廓。
.className input:focus {outline: 0;
}
此属性将删除所选元素的轮廓。
#5楼
您可以使用CSS禁用它! 这是我用于禁用蓝色边框的代码:
*:focus {
outline: none;
}
这将删除蓝色边框!
这是一个工作示例: JSfiddle.net
希望能帮助到你!
#6楼
您也可以尝试
input[type="text"] {
outline-style: none;
}
要么
.classname input{
outline-style: none;
}
#7楼
这是一个普遍关注的问题。
浏览器呈现的默认轮廓很难看。
例如:
form, label { margin: 1em auto; } label { display: block; }
<form> <label>Click to see the input below to see the outline</label> <input type="text" placeholder="placeholder text" /> </form>
最推荐的最常见的“修复”是outline:none
-如果使用不当,则是可访问性的灾难。
所以...轮廓到底有什么用?
我发现有一个非常实用的网站 ,可以很好地解释所有内容。
当使用TAB键(或等效键)浏览Web文档时,它为具有“焦点”的链接提供视觉反馈。 这对于不能使用鼠标或有视觉障碍的人们特别有用。 如果删除大纲,那么这些人将无法访问您的网站。
好的,让我们尝试与上述相同的示例,现在使用TAB
键进行导航。
form, label { margin: 1em auto; } label { display: block; }
<form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> </form>
请注意,即使不单击输入也如何知道焦点在哪里?
现在,让我们尝试一下outline:none
可信赖的<input>
上outline:none
内容
因此,再次单击文本后,使用TAB
键导航,看看会发生什么。
form, label { margin: 1em auto; } label { display: block; } input { outline: none; }
<form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> </form>
弄清楚如何确定焦点在哪里? 唯一的信号是光标闪烁。 我上面的示例过于简单。 在实际情况下,页面上不会只有一个元素。 与此类似的东西。
.wrapper { width: 500px; max-width: 100%; margin: 0 auto; } form, label { margin: 1em auto; } label { display: block; } input { outline: none; }
<div class="wrapper"> <form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> </form> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <form> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> </form> <form> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> </form> <form> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form> </div>
现在,如果我们保留大纲,则将其与相同的模板进行比较:
.wrapper { width: 500px; max-width: 100%; margin: 0 auto; } form, label { margin: 1em auto; } label { display: block; }
<div class="wrapper"> <form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> </form> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <form> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> </form> <form> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> </form> <form> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form> </div>
所以我们建立了以下
- 轮廓很丑
- 删除它们会使生活更加困难。
那么答案是什么呢?
删除丑陋的轮廓并添加您自己的视觉提示以指示焦点。
这是我的意思的一个非常简单的例子。
我删除轮廓并在:focus和:active上添加底部边框。 我还通过将:focus和:active (个人喜好)设置为透明来删除顶部,左侧和右侧的默认边框。
form, label { margin: 1em auto; } label { display: block; } input { outline: none } input:focus, input:active { border-color: transparent; border-bottom: 2px solid red }
<form> <label>Click to see the input below to see the outline</label> <input type="text" placeholder="placeholder text" /> </form>
因此,我们使用前面的“真实世界”示例尝试上述方法:
.wrapper { width: 500px; max-width: 100%; margin: 0 auto; } form, label { margin: 1em auto; } label { display: block; } input { outline: none } input:focus, input:active { border-color: transparent; border-bottom: 2px solid red }
<div class="wrapper"> <form> <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> <input type="text" placeholder="placeholder text" /> </form> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <form> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> </form> <form> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> </form> <form> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form> </div>
可以通过使用外部库来进一步扩展该库,该库基于修改“大纲”的思想,而不是像Materialize一样完全删除它
您可以得到一件并不丑陋且工作很少的东西
body { background: #444 } .wrapper { padding: 2em; width: 400px; max-width: 100%; text-align: center; margin: 2em auto; border: 1px solid #555 } button, .wrapper { border-radius: 3px; } button { padding: .25em 1em; } input, label { color: white !important; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" /> <div class="wrapper"> <form> <input type="text" placeholder="Enter Username" name="uname" required> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> </form> </div>
#8楼
删除所有焦点样式通常对辅助功能和键盘用户不利。 但是轮廓很难看,为每个单独的交互元素提供自定义的聚焦样式可能是真正的痛苦。
因此,我发现的最佳折衷方案是仅在我们检测到用户正在使用键盘进行导航时才显示轮廓样式。 基本上,如果用户按下TAB键,我们将显示轮廓,如果他使用鼠标,我们将其隐藏。
它不会阻止您为某些元素编写自定义焦点样式,但至少它提供了很好的默认设置。
这是我的方法:
// detect keyboard users const keyboardUserCssClass = "keyboardUser"; function setIsKeyboardUser(isKeyboard) { const { body } = document; if (isKeyboard) { body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); } else { body.classList.remove(keyboardUserCssClass); } } // This is a quick hack to activate focus styles only when the user is // navigating with TAB key. This is the best compromise we've found to // keep nice design without sacrifying accessibility. document.addEventListener("keydown", e => { if (e.key === "Tab") { setIsKeyboardUser(true); } }); document.addEventListener("click", e => { // Pressing ENTER on buttons triggers a click event with coordinates to 0 setIsKeyboardUser(!e.screenX && !e.screenY); }); document.addEventListener("mousedown", e => { setIsKeyboardUser(false); });
body:not(.keyboardUser) *:focus { outline: none; }
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p> <button>This is a button</button> <a href="#">This is anchor link</a> <input type="checkbox" /> <textarea>textarea</textarea> <select/>
#9楼
也尝试一下
.form-group input {display: block;background: none;padding: 0.175rem 0.175rem 0.0875rem;font-size: 1.4rem;border-width: 0;border-color: transparent;line-height: 1.9;width: 100%;color: #ccc;transition: all 0.28s ease;box-shadow: none;}
#10楼
您可以使用以下命令删除文本/输入框周围的橙色或蓝色边框(轮廓) :
input {background-color: transparent;border: 0px solid;height: 20px;width: 160px;color: #CCC;outline:none !important;
}
#11楼
我尝试了所有答案,但直到找到-webkit-tap-highlight-color
,我仍然无法在Mobile上工作。
所以,对我有用的是...
* { -webkit-tap-highlight-color: transparent; }
#12楼
这使我困惑了一段时间,直到我发现这条线既不是边界也不是轮廓,而是阴影。 因此,要删除它,我必须使用以下代码:
input:focus, input.form-control:focus {outline:none !important;outline-width: 0 !important;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;
}
#13楼
在Firefox中,所有解决方案都不适合我。
以下解决方案更改了Firefox的焦点边框样式,并将其他浏览器的轮廓设置为无。
我已经有效地使焦点边框从3px蓝色发光变为与文本区域边框匹配的边框样式。 这是一些边框样式:
虚线边框(边框2px,红色虚线):
无边界! (边界为0px):
Textarea边框(边框1px纯灰色):
这是代码:
input:focus, textarea:focus { outline: none; /** For Safari, etc **/ border:1px solid gray; /** For Firefox **/ } #textarea { position:absolute; top:10px; left:10px; right:10px; width:calc(100% - 20px); height:160px; display:inline-block; margin-top:-0.2em; }
<textarea id="textarea">yo</textarea>
#14楼
从所有输入中删除
input {outline:none;
}
#15楼
尝试这个
*:focus {outline: none;
}
这会影响您的整个页面
如何删除输入文本元素上的边框突出显示相关推荐
- 删除Word2016文本外的黑边框,有截图
昨晚设置图片,不小心把整个文档设置成了这个有个边框的样子,难受 删除方法: 1 选中图片,右击,选择边框和底纹 2 选择页面边框,无,确定,就会删除边框 3添加边框方法:选择页面边框,方框,确定,就会 ...
- layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上,鼠标悬浮,显示所有文字内容(修改源码)...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了 问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
- vba 删除 添加checkbox_如何设置EXCEL输入内容后自动添加边框?
在Excel中我们经常需要对输入的表格内容添加边框,一般的操作步骤是,先输入内容,再设置边框.但这样的问题在于,如果我们下次还要继续输入内容,还要再次添加边框,如果删除内容,还要手动去除边框. 那有没 ...
- html 垂直居中一般用什么意思,html – 什么使元素上的文本垂直居中?
我知道这是几岁,但是在为项目编写一个重置样式表时,我会在进行一些调查后添加我的想法. 注意**这是基于浏览Firefox源代码,因为它是最简单的获取和阅读.然而,基于其他浏览器中的类似行为,实现可能相 ...
- Flutter TextField 边框样式以及提示文本 、Flutter输入文本TextField
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. github? 你可能需要 百度同步 CSDN 网易云课堂教程 掘金 知乎 Flutter系列文章 头条同步 本文章首发于微信公众号( ...
- 使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容
第一次在CNBlogs上发Post是提出一个有关使用WebBrowser控件时对SELECT网页元素操作的疑惑,这个问题至今也没有解决,后来有朋友在该Post的评论里询问WebBrowser控件如何在 ...
- 在长度为n的()上,删除第一个元素,其算法的时间复杂度为O(n)
在长度为n的()上,删除第一个元素,其算法的时间复杂度为O(n) A.只有表头指针的不带表头结点的循环单链表 B.只有表尾指针的不带表头结点的循环单链表 C.只有表尾指针的带表头结点的循环单链表 D. ...
- 删除极速输入法和云上PDF
文章目录 删除极速输入法和云上PDF 删除方法 极速输入法 云上PDF 真情流露 删除极速输入法和云上PDF 删除方法 极速输入法和云上pdf删除方法一样 极速输入法 1,先在控制面板->卸载程 ...
- [ISUX转译]iOS7人机界面指南-UI元素(上)
本文转载自:腾讯ISUX (http://isux.tencent.com/ios-human-interface-guidelines-ui-design-ios7-ui-1.html) ----- ...
最新文章
- Java Socket例子
- stm32影子寄存器、预装载寄存器,TIM_OC1PreloadConfig和TIM_ARRPreloadConfig的作用
- 进行有效编辑的七种习惯
- python 示例_Python中带有示例的关键字除外
- hashSet与treeSet的去重原理
- Oracle 18c 新特性:动态 Container Map 增强 Application Container 灵活性
- Linux 之 CentOS 7.2 安装 Java JDK
- 代码回滚:Reset、Checkout、Revert的选择(转)
- 玩Mega8 智能充电器-12. 终于实现-dV检测(转)
- hownet与wordnet的区别
- 立创EDA元件封装导入AD软件教程
- POJ 3764 DFS+trie树
- PDMS批量输出ISO图
- 备战金九银十,腾讯 T4 梳理 2022 年最全 999 道 Java 岗必备面试题答案
- 横板闯关游戏中的角色移动
- 阿里云部署数据库(遇到的问题及解决方案)
- 阿里云域名解析与绑定过程
- 当不小心更改了matlab工具箱的内置函数怎么办?以及matlab指定工具箱卸载
- 【转】Linux那些事儿之我是U盘(4)想到达明天,现在就要启程
- vb实现 心理学实验 IAT内隐联想测试
热门文章
- python实现二分法查找_python3 二分法查找
- 自动飞行控制系统_波音737MAX,安全评估竟是自己做的!飞行员仅用iPad学习驾驶!...
- Material组件之MaterialApp、Scaffold、AppBar学习笔记
- Shell第一个脚本-添加用户
- LineatLayout设置背景为.9图后产生位移
- 【Java并发编程】并发容器之CopyOnWriteArrayList
- mysql 导入导出 csv_mysql 导出导入数据 -csv
- websocket检测服务器是否断开_websocket – 如何检测用户是否因网络断开而离开Phoenix通道?...
- TP5.0 PHPExcel 数据表格导出导入(引)
- Codeforces 1036E. Covered Points