`
Rainbow702
  • 浏览: 1076850 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    博客分类:
  • web
阅读更多

chrome浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页浏览器,但是在开发中,让人感觉很多余的一个特性就是,在表单项中的控件聚焦时总会出现一个黄色边框。

特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示:
input[text]:



 

textarea:




 

有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下:

取消表单项聚焦时产生的黄色边框:

input,button,select,textarea{outline:none} 

 

取消textarea的拖动改变大小的功能:

textarea{resize:none} 

 

合并之后:

input,button,select,textarea{ outline:none;} 
textarea{ font-size:13px; resize:none;} 

 

  • 大小: 2.2 KB
  • 大小: 3.8 KB
分享到:
评论

相关推荐

    去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    1、使用Chrome的都知道,当鼠标焦点在input、textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,outline这个属性。 你可以用下面的css代码...

    取消chrome焦点边框效果(橘色)

    本篇将详细介绍如何通过CSS来取消Chrome浏览器中输入框(input)、按钮(button)、下拉选择(select)以及文本域(textarea)等元素获得焦点时显示的橘色边框。 #### 一、理解焦点样式 在大多数现代浏览器中,当某个表单...

    css解决Webkit 核心文本输入框的高亮

    在网页设计与开发的过程中,经常会遇到浏览器默认样式带来的各种显示问题,其中之一就是Webkit核心文本输入框获得焦点时出现的高亮边框问题。这个问题在不同的浏览器和操作系统中表现不一,但通常会影响到网站的整体...

    保护眼睛,开启浏览器的夜间模式.docx

    代码还特别处理了`input`、`select`、`option`、`button`和`textarea`等表单元素,确保它们在聚焦或悬停时也有相应的暗色效果,并且保持一定的可读性和对比度。例如,当这些元素获得焦点或被鼠标悬停时,边框颜色会...

    各浏览器兼容问题

    本文详细介绍了在进行网页开发时遇到的浏览器兼容问题及解决方案,包括了CSS Hack技术、CSS3兼容性处理、透明度设置、清除浮动、Reset CSS等内容。通过对这些知识点的学习和应用,可以有效提升网站在不同浏览器环境...

    Webkit内核的浏览器默认CSS属性

    - `<input>`、`<button>`、`<textarea>`:默认显示为行内元素,具有一定的内边距和外边距。 - **文本相关**: - `<hr>`:显示为块级元素,默认居中显示,边框样式为 `inset`,宽度为 `1px`。 - `<address>`:显示...

    基于javascript制作微博发布栏效果_.docx

    - **oninput**:在标准浏览器中,如Chrome、Firefox等,用于捕获用户对元素内容的修改,比如输入文字。 3. **焦点事件**: - **onfocus**:当元素获得焦点时触发,如用户点击输入框。在例子中,当textarea获取...

    CSS去掉A标签(链接)虚线框的方法

    接下来,对于Safari和Chrome浏览器,当输入框如`input`或`textarea`获得焦点时,可能会出现边框的阴影效果。这也可以通过设置`outline:none;`属性来去除。 ```css input, textarea { outline: none; } ``` 对于`...

    html5+CSS 实现禁止IOS长按复制粘贴功能

    这段代码将恢复`input`和`textarea`的正常行为,使得用户依然可以在输入框中输入和编辑文本。同时,`margin: 0px;`和`padding: 0px;`是用来清除默认的外边距和内边距,而`outline: none;`则是移除焦点时的边框高亮。...

    很不错的jquery表单美化插件

    6. **兼容性**:既然标签中提到了“兼容各种浏览器”,这意味着这款插件已经过充分测试,能在包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer在内的主流浏览器上稳定运行。 在实际应用中,开发者...

    基于HTML爱的表白信

    - 开发过程中可能使用了文本编辑器(如Visual Studio Code)和调试工具(如Chrome开发者工具)进行代码编写和问题排查。 8. **浏览器兼容性** - 提到“兼容性好”,意味着这个表白信项目考虑到了不同浏览器的差异...

    HTML5+CSS3开发商业站点Chapter10.pptx

    - **调试技巧**:使用开发者工具(如Chrome DevTools)进行代码调试,确保网站在各种设备和浏览器上表现一致。 通过以上知识点的学习与实践,你可以更好地掌握HTML5+CSS3的基础知识,并能运用这些知识去开发高质量...

    Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.docx

    元素用于创建表单,表单控件如<input>、、<textarea>用于收集用户数据。表单提交可以通过GET或POST方法,action属性指定提交地址。 【多媒体】 HTML5的和标签支持音频和视频播放,通过source标签可以指定不同的来源...

    仅限于自己用的web前端面试题

    - **置换元素**:指的是由浏览器根据特定的规则自动替换的元素,如 `<img>`、`<input>`、`<textarea>` 和 `<select>`。 ### 二十四、固定背景图片 - 正确答案是 **A**:`background-attachment: fixed;`,此属性...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有... -在Page_Load中设置了哪些需要在AJAX中更新的Asp.net控件会在回发时保持状态,可以...

    HTML语言初级教程

    在实践中,可以使用编辑器如Visual Studio Code或Notepad++来编写HTML代码,并使用浏览器的开发者工具(如Chrome的开发者工具)进行实时预览和调试。此外,W3Schools和MDN Web Docs等在线资源提供了丰富的HTML教程和...

Global site tag (gtag.js) - Google Analytics