单击按钮时出现蓝色边框

单击“按钮”按钮时出现蓝色边框的问题

添加css属性，以便在单击按钮时不会出现蓝色边框。

按钮{

outline：none;

}

如何在Google Chrome-HTML / CSS中删除按钮边框

如何在Google Chrome浏览器中删除按钮按钮的边框

在Google Chrome浏览器中单击一个按钮，将始终显示一个框架。问我如何删除此框架

------解决方案--------------------

如果设置了此选项，则不会看到该框。

：重点{

轮廓：0;

}

使用轮廓，每个人都喜欢直接在重置样式表中进行重置：

* {

概述：无；

}

Eric Meyers在他的CSS重置中重置如下：

/ *请记住定义焦点样式！ * /

：focus {

大纲：0；

}

每个人都可以说这些方法很常见。但是有一件事可能并不是所有人都知道的-当在表单的按钮中使用轮廓时，firefox浏览器中仍会显示一个虚线框。就在今天，一个朋友也问了这个问题，所以我检查了相关信息，并了解到在Firefox下还需要其他方法来处理它。因此，今天的教程将简单地了解如何处理此问题。

问题描述：

如前所述，许多设计师喜欢使用：

* {outline：none;}

或

：focus {outline：none;}

解决聚焦点较粗的问题。但是，您是否注意到使用此方法，Firefox中的按钮仍然会有一个虚线框，如下图所示：

解决方案：

要解决此错误，我们需要使用私有的Mozilla属性：-moz-focuse-inner。但是，这是每个人都需要特别注意的一件事：“ -moz-focus-inner”不是要重置“ outline”属性的值，而是要更改按钮的“ border”样式。有关详细信息，请参见下面的'S代码：

input ::-moz-focus-inner

按钮：：-moz-focus-inner {

边界：0；

}

上面写道，所有输入都包括在内，但有时我们不希望该值影响“ input [type = text]”，因此我们实际上可以这样设置：

按钮：：-moz-focus-inner

input [type =“ reset”] ::-moz-focus-inner

input [type =“ button”] ::-moz-focus-inner

input [type =“ submit”] ::-moz-focus-inner

input [type =“ file”]> input [type =“ button”] ::-moz-focus-inner {

边界：无；

}

通过上面的代码，丑陋的虚线框，我们可以顺利地将其删除。实际上，我们需要以这种方式设置按钮的轮廓设置，以实现所有浏览器相同的样式效果：

：focus {outline：none;} / *对于IE * /

::-moz-focus-inner {border-color：transparent;} / *对于mozilla * /

通过这种方式，“表单”按钮将获得焦点，并且每个浏览器中的渲染效果是相同的。

以上是消除轮廓边框效果的方法，但是可能不容易理解，因此您也可以像设置普通样式一样理解它，如以下代码所示：

按钮：：-moz-focus-inner

input [type =“ reset”] ::-moz-focus-inner

input [type =“ button”] ::-moz-focus-inner

input [type =“ submit”] ::-moz-focus-inner

input [type =“ file”]> input [type =“ button”] ::-moz-focus-inner {

边框：1像素点透明；

}

button：focus ::-moz-focus-inner

input [type =“ reset”]：focus ::-moz-focus-inner

input [type =“ button”]：focus ::-moz-focus-inner

input [type =“ submit”]：focus ::-moz-focus-inner

input [type =“ file”]> input [type =“ button”]：focus ::-moz-focus-inner {

填充：3px;

border-color：＃F3F3F3;

}

以上用法可以看作是一个小技巧。也许有很知道。我不想再谈论这种问题，因为我没有那种技能。明确一点，但我只知道这种方法可以解决问题

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-339680-1.html