谷歌浏览器怎么去掉默认焦点边框(input边框)?

要去掉谷歌浏览器默认的焦点边框（input边框），可以通过CSS样式来进行设置，具体的步骤如下：

Step 1：为input元素设置CSS样式

input:focus {
  outline: none;
}

在上面的CSS样式中，我们设置了当input元素获得焦点时，将其默认的焦点边框样式设置为none。这样，当用户在输入框中输入内容时，就不会被默认的边框样式所干扰。

Step 2：考虑可访问性

然而，对于视力差的用户和键盘导航的用户来说，焦点边框是很重要的指示工具。因此，为了保证可访问性，我们可以将默认焦点边框替换为其他更加友好的视觉效果。

以下是两个示例说明：

示例1：使用伪类元素

input:focus {
  outline: none;
}

input:focus::after {
  content: '';
  width: 100%;
  height: 2px;
  background: #0078D7;
  position: absolute;
  bottom: 0;
  left: 0;
}

在这个示例中，我们仍然将默认焦点边框设置为none，但同时使用伪类元素::after，在输入框的底部添加了一条2px高的蓝色横线，来代替默认的焦点边框效果。注意要设置该伪类元素的content值为一个空字符串。

示例2：使用box-shadow

input:focus {
  outline: none;
  box-shadow: 0 0 3px #0078D7;
}

在这个示例中，我们将默认焦点边框设置为none，使用box-shadow样式来代替。该box-shadow样式的参数分别表示：水平偏移量为0，垂直偏移量为0，模糊半径为3px，阴影颜色为蓝色。这样，在输入框获得焦点时，会出现一个蓝色的虚线框，来作为焦点边框的代替效果。

综上所述，以上两个示例都保留了焦点边框的指示效果，又同时去除了默认的突兀样式，非常适合在网站开发中使用。