最近在調整 Blogger 版面時，遇到一個在視覺上非常干擾的問題。Blogger 的右上角預設搜尋框，在手機或小螢幕（寬度小於 1240px）瀏覽時，會正常顯示為一個簡約的「放大鏡」圖示；但只要切換到電腦版大螢幕（寬度大於 1240px），這個搜尋框就會強制展開，並且自帶一個深灰色的底框，有時候右側甚至還會跑出一個極度突兀的捲軸。
如果你跟我一樣，覺得這個灰底與網站整體的配色很不搭，想要將它改成完全透明，可以在 Blogger 後台透過修改 HTML 與 CSS 來解決。
為什麼一般的 CSS 改不動它？
一開始我嘗試用常規的 CSS 去把 .search-input 的背景設為透明，卻發現完全沒有效果。
經過瀏覽器的開發者工具（F12）抽絲剝繭後發現，這是 Blogger 官方新版主題（例如 Contempo 等）內建的響應式設計（RWD）機制。為了在大螢幕畫出那個灰底，系統不僅使用了多層的 <div> 容器，甚至還動用了 偽元素（::before, ::after） 來鋪設背景。
因此，要徹底消滅這個灰底，我們必須採用「全範圍打擊」，把所有可能產生背景的圖層與偽元素一次抽乾。
🛠 解決步驟與 CSS 語法
請依照以下步驟，將這段「終極版」的 CSS 覆蓋代碼加入你的 Blogger 主題中：
- 登入 Blogger 後台，點選左側選單的 「主題」(Theme)。
- 點擊「自訂」按鈕旁邊的 向下箭頭，選擇 「編輯 HTML」(Edit HTML)。
- 在程式碼區域內點一下，按
Ctrl + F(Mac 用Cmd + F) 搜尋</head>標籤。 - 將下方的 CSS 程式碼完整複製，並貼在
</head>標籤的 正上方：
<style>
/* 1. 徹底清除搜尋區塊所有可能帶有背景的容器 */
.search,
.search.is-expanded,
#search_top,
.widget.BlogSearch,
.BlogSearch .widget-content,
.search form,
.search .search-input {
background-color: transparent !important;
background: none !important;
box-shadow: none !important;
border: none !important;
}
/* 2. 破壞 Blogger 主題用來畫灰底的「偽元素」 */
.search::before,
.search::after,
.search form::before,
.search form::after,
.search-input::before,
.search-input::after {
display: none !important;
background: transparent !important;
}
/* 3. 設定輸入框的文字與底線（讓它融入你的版面） */
.search input[name="q"] {
background-color: transparent !important;
background: transparent !important;
color: #333333 !important; /* 搜尋文字的顏色，可依據你的網站背景調整 */
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important; /* 加一條淡淡的底線，標示輸入位置 */
padding: 5px !important;
}
/* 4. 確保捲軸不會再出現 */
.search form {
overflow: hidden !important;
}
</style>- 點擊右上角的 「儲存」(磁碟圖示)。
💡 樣式微調建議
- 文字顏色： 如果你的網站背景偏暗色系，建議將程式碼第 3 區塊中的
color: #333333 !important;改為白色color: #ffffff !important;，這樣打字時才看得見。 - 底線樣式： 為了避免搜尋框完全透明導致訪客找不到輸入位置，我在語法中加入了一條透明度 0.3 的黑色底線（
border-bottom）。你也可以依照網站風格，將其改為白色半透明rgba(255, 255, 255, 0.5)，或是直接移除該行。
儲存並重新整理網頁後，無論螢幕尺寸怎麼縮放，那個頑固的灰框和捲軸就會徹底消失，還給你一個乾淨俐落的版面了！
