如何更改 Windows 11 中的默认浏览器

果您已将 PC 从 Windows 10 更新到 Windows 11,您可能已经注意到,当您单击网站、PDF 文档或各种其他文件类型的链接时,您现在将被发送到 Microsoft 的 Edge 浏览器. 在其新版本的 Windows 中,微软似乎特别积极地将自己的应用程序推向升级前默认安装的应用程序。换句话说,Edge 突然变成了你的默认浏览器。

通常,当你第一次进入另一个不是 Edge 的浏览器时——比如谷歌 Chrome——非 Edge 浏览器会询问你是否要将其设为默认值。但是,在 Windows 11 中更改默认值的过程变得比在 Windows 10 中更复杂。因此,您可能无法收到那个方便的请求——或者,如果您收到了,它可能会让您进入一个标题为“应用程序 >默认应用程序。” 无论哪种方式,以下是切换方法。

切换默认浏览器

如果您不希望 Edge 成为您的默认浏览器,并且您最喜欢的浏览器没有提供为您进行更改 - 或者如果它提供了而是将您发送到“默认应用程序”页面 - 这里是如何切换默认。对于本示例,我使用的是 Google Chrome,但这应该适用于您系统上安装的任何浏览器。

选择设置 > 应用程序 > 默认应用程序

在“为应用程序设置默认值”下,向下滚动到您首选的浏览器所在的位置,或在“搜索应用程序”字段中输入名称。单击应用程序。

您将看到与浏览器相关的文件列表,并在每个文件名下显示当前关联的应用程序。在 Windows 11 中,您不能通过单击简单地更改默认浏览器——您必须为每种特定文件类型更改分配的浏览器。

查找分配给 Edge 的文件类型,例如 .HTM、.HTML、HTTP、HTTPS 和 .PDF(除非您有喜欢的 PDF 阅读器)。单击要更改的那些。

您可能会收到一个“在您切换之前”的弹出窗口,敦促您尝试 Microsoft Edge — 继续并单击“仍然切换”。您会看到一个弹出窗口,上面有一个“继续使用这个应用程序”选项,下面是您安装的其他浏览器。继续并选择您要使用的那个。(请注意,某些文件类型可能无法为您的浏览器提供替代方案。)

注意:当您阅读本文时,某些浏览器可能已经建立了一个系统,可以让您更轻松地切换默认浏览器。比如写这个的时候,我第一次打开火狐浏览器,问我要不要把它设为默认。我让它继续,当我转到设置的“默认应用程序”部分时,我发现 Firefox 现在被设置为 .HTM、.HTML、.HTTP 和 .HTTPS 文件的默认设置。Edge 仍被列为 .PDF、.SHTML、.SVG、.XHT 和 .XHTML 文件。

还有一件事:如果您出于任何原因打开 Edge,您将看到预期的弹出窗口,敦促您返回“推荐的浏览器设置”。

但是等等——还有更多。即使您将浏览器默认设置为 Edge 以外的其他浏览器,您仍然会将 Edge 作为许多 Windows 应用程序的首选浏览器。例如,调出 Windows 11 的新窗口小部件窗格(通过单击任务栏中的窗口小部件图标,该图标看起来像一个两窗格的窗口),然后单击出现在那里的新闻项目之一 - 链接将打开边缘。

如果你觉得这很烦人,可能有一个应用程序可以解决这个问题。为了打开特定于 Edge 的链接,您需要执行以下操作:

转到设置 > 应用程序 > 默认应用程序。

向下滚动到底部,直到看到“按链接类型选择默认值”。

单击它,然后在标有“为链接类型设置默认值”的搜索框中键入“边缘”。

在“Microsoft-Edge”标签下,您将看到“Microsoft Edge”。单击它,您将看到可用于打开这些专用链接的任何其他浏览器。

有趣的是,如果您安装 Chrome 或 Firefox,您不会将它们视为选项。但是,如果您安装了 Brave 浏览器,您将看到它作为一个选项——如果您选择了它,那么每当您单击小部件窗格中的新闻链接时,它就会出现在 Brave 中。

另一种可能性是名为EdgeDeflector的工具,最初创建该工具是为了拦截 Windows 10 中特定于 Edge 的任何链接并即时重写它们,以便可以通过默认 Web 浏览器打开它们。我浏览了一下,了解到它的最新版本 v1.2.3.0 可以与 Windows 11 一起使用。

我安装并按照安装说明进行操作。不幸的是,虽然这对大多数链接都有效,但当我在“小部件”窗格中单击新闻来源中的链接时,它并没有完全奏效——该链接在 Chrome 中打开,但没有任何图形通过。不过,我会密切关注这个应用程序...

TML的<input>元素是Web开发中最常用的表单控件之一。然而，不同浏览器对其默认样式的处理有所不同，有时会导致UI的不一致。通过CSS，我们可以去除<input>元素的默认样式，从而实现高度自定义的输入框样式。本文将通过详细的例子，展示如何使用CSS去除<input>框的默认样式，并应用自定义样式。

一、基础示例

1. 输入框的默认样式

首先，我们来看一个带有默认样式的输入框。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Default Input Style</title>
  <style>
    input {
      width: 200px;
      height: 30px;
      margin: 20px;
      padding: 0 10px;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Default style">
</body>
</html>

以上代码定义了一个普通的文本输入框，并设置了一些基本的宽度、高度、边距和内边距。

2. 去除默认样式

接下来，我们通过CSS来去除输入框的默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Default Input Style</title>
  <style>
    input {
      width: 200px;
      height: 30px;
      margin: 20px;
      padding: 0 10px;
      border: none;             /* 去除边框 */
      outline: none;            /* 去除聚焦时的外边框 */
      background: none;         /* 去除背景 */
      box-shadow: none;         /* 去除阴影 */
      -webkit-appearance: none; /* 去除webkit浏览器的默认样式 */
      -moz-appearance: none;    /* 去除mozilla浏览器的默认样式 */
      appearance: none;         /* 去除所有浏览器的默认样式 */
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Custom style">
</body>
</html>

此段代码通过多种CSS属性移除了<input>元素的默认样式，包括边框、背景、阴影和样式外观。

二、自定义样式

1. 自定义边框与背景

现在让我们为输入框添加一些自定义样式，以实现你想要的外观。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Input Style</title>
  <style>
    input {
      width: 200px;             
      height: 40px;             
      margin: 20px;
      padding: 0 10px;
      border: 2px solid #333;   /* 自定义边框 */
      border-radius: 5px;       /* 设置圆角 */
      background-color: #f5f5f5; /* 自定义背景 */
      font-size: 16px;          /* 设置字体大小 */
      color: #333;              /* 设置字体颜色 */
      box-sizing: border-box;   /* 包含内边距和边框宽度 */
    }
    
    input:focus {
      border-color: #007BFF;     /* 聚焦时更改边框颜色 */
      background-color: #e1f5fe; /* 聚焦时更改背景颜色 */
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Custom style">
</body>
</html>

以上代码为输入框设置了一些自定义样式，包括边框、背景颜色、圆角、字体大小和颜色。同时，当输入框获取焦点时（focus状态），边框和背景颜色也会发生变化。

三、不同类型的输入框

1. 去除不同类型输入框的默认样式

不同类型的输入框（如type="text"、type="number"、type="date"等）默认样式可能有所不同。以下示例展示了去除不同类型输入框的默认样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Different Input Types</title>
  <style>
    input {
      width: 200px;             
      height: 40px;             
      margin: 20px;
      padding: 0 10px;
      border: none;             
      outline: none;            
      background: none;         
      box-shadow: none;         
      -webkit-appearance: none;
      -moz-appearance: none;    
      appearance: none;         
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Text Input">
  <input type="number" placeholder="Number Input">
  <input type="date" placeholder="Date Input">
  <input type="email" placeholder="Email Input">
</body>
</html>

通过这种方式，我们可以统一去除不同类型输入框的默认样式，并应用自定义样式。

四、响应式设计

1. 基本响应式样式

为确保输入框在不同设备上的样式一致，我们可以添加一些响应式样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Input</title>
  <style>
    input {
      width: 100%;              
      max-width: 500px;         
      height: 40px;             
      margin: 20px auto;
      padding: 0 10px;
      border: 1px solid #ccc;  
      border-radius: 4px;      
      font-size: 16px;         
      box-sizing: border-box;  
    }
    
    @media (max-width: 600px) {
      input {
        font-size: 14px;
      }
    }
    
    @media (min-width: 601px) {
      input {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Responsive Input">
</body>
</html>

以上代码通过媒体查询（@media）确保输入框在不同屏幕尺寸上的字体大小合适，并使用max-width和width: 100%属性实现响应式布局。

总结

通过本文的详细介绍，你应该已经掌握了如何使用CSS去除<input>元素的默认样式，并应用自定义样式来实现一致的视觉效果。无论是简单的表单输入框还是复杂的响应式设计，都可以通过合理的CSS配置来达到预期的效果。希望这篇文章对你有帮助，祝你在前端开发的道路上不断进步！

一篇文章我们说了单行文本框和多行文本框，今天呢我们继续看一下表单的其它控件：单选框、复选框、下拉框。

（1）单选框和复选框

在我们表单页面中，经常会有选择性别或者选择爱好这类的内容，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

使用语法：

单选框：<input type="radio" value="值" name="名称" checked="checked"/>

复选框：<input type="checkbox" value="值" name="名称" checked="checked"/>

详细讲解：

1、type: 当 type="radio" 时，控件为单选框；当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序使用）

3、name：为控件命名，这里要注意同一组的单选按钮，name 取值一定要一致（具体可见下边的参考练习）。

4、checked：当设置 checked="checked"（也可以直接简写成checked）时，该选项被默认选中

使用练习：

我们创建一个表单，表单里边包含姓别（男、女）选择的单选框，默认选中男以及爱好（唱歌、打游戏、绘画、旅游）选择的多选框，默认选中唱歌。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

（2）下拉框

下拉框也是我们常用的一个表单控件，多用于选择城市地区等。

使用语法：

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解：

1、option：option为select下拉子元素，可以有一个或多个，写法类似ul和li，其中的value内容为提交数据到服务器的值（后台程序使用）

2、selected：当设置 selected="selected"（也可以直接简写成selected）时，该选项被默认选中

使用练习：

我们创建一个表单，表单里边包含一个城市的下拉框，下拉框中有北京、上海、天津这三个城市，其中默认选中天津。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

好了，本篇文章就先给大家介绍这几个表单控件的语法以及使用，下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示，记得平时要多加练习才是王道。

每日金句：做人要像竹子一样每前进一步，都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

在线咨询

上一篇：黑客入侵网络的五十种方法
下一篇：mybatis拦截器实现主键自动生成

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商