解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色是蓝色的(见下面的图片)。Jeff以为是那里定义了颜色的样式,在开发者工具里找啊找也没发现属于黄色或蓝色的css代码。后来搜索搞定了,原来是css默认的问题。

input和textarea的黄色/蓝色边框问题图示

input和textarea的黄色/蓝色边框问题的原因与解决方法

由于不同浏览器对outline这个css属性默认情况不同所致。解决方法是定义outline属性为none,即将下面的css代码加入相对应的选择器中。

input,textarea{outline:none;}

或者加入到css重置中一劳永逸。

关于outline属性(来源于w3school)

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 outline 简写属性在一个声明中设置所有的轮廓属性。 可以按顺序设置如下属性: outline-color outline-style outline-width

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏李蔚蓬的专栏

3.2 自定义控件基础 之 View的测量

在现实生活中,如果我们去画一个图形,就必须知道它的大小和位置。Android系统在绘制View之前也必须对View进行测量,即告诉系统该画一个多大的View。这...

10330
来自专栏吾爱乐享

php学习之css小结1

18330
来自专栏闵开慧

struts2标签示例

常用UI标签: Textfield标签输出一个HTML单行文本输入控件 Textarea标签输出一个HTML多行文本输入控件 Radio标签输出单选按钮 che...

29960
来自专栏软件开发

PowerPoint基础

一、基础 默认后缀ppt,pptx office2003和以后的版本只支持ppt, 可以将pptx另存为ppt97-2003 ? 二、修改PPT尺寸 ? 三、新...

25590
来自专栏前端萌媛的成长之路

position有几种,absolute和relative的区别

20120
来自专栏coding

事件修饰符

15440
来自专栏从零开始学自动化测试

Selenium2+python自动化65-js定位几种方法总结

前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一、以下总结了5种js定位的方法 除了id是定位到的是单个elemen...

35770
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(3)——操作测试对象

30960
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

8120
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二天 HTML表单&CSS【悟空教程】

所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是用户注册,覆盖了表单标签的所有的元素。效果图如下:

51140

扫码关注云+社区

领取腾讯云代金券