如何更改 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小時內與您取得聯系。

整合營銷服務商