Blogger 版面微調：如何徹底移除預設搜尋框的「頑固灰底」與「捲軸」？

最近在調整 Blogger 版面時，遇到一個在視覺上非常干擾的問題。Blogger 的右上角預設搜尋框，在手機或小螢幕（寬度小於 1240px）瀏覽時，會正常顯示為一個簡約的「放大鏡」圖示；但只要切換到電腦版大螢幕（寬度大於 1240px），這個搜尋框就會強制展開，並且自帶一個深灰色的底框，有時候右側甚至還會跑出一個極度突兀的捲軸。

如果你跟我一樣，覺得這個灰底與網站整體的配色很不搭，想要將它改成完全透明，可以在 Blogger 後台透過修改 HTML 與 CSS 來解決。

為什麼一般的 CSS 改不動它？

一開始我嘗試用常規的 CSS 去把 .search-input 的背景設為透明，卻發現完全沒有效果。

經過瀏覽器的開發者工具（F12）抽絲剝繭後發現，這是 Blogger 官方新版主題（例如 Contempo 等）內建的響應式設計（RWD）機制。為了在大螢幕畫出那個灰底，系統不僅使用了多層的 <div> 容器，甚至還動用了 偽元素（::before, ::after） 來鋪設背景。

因此，要徹底消滅這個灰底，我們必須採用「全範圍打擊」，把所有可能產生背景的圖層與偽元素一次抽乾。

🛠 解決步驟與 CSS 語法

請依照以下步驟，將這段「終極版」的 CSS 覆蓋代碼加入你的 Blogger 主題中：

1. 登入 Blogger 後台，點選左側選單的 「主題」(Theme)。
2. 點擊「自訂」按鈕旁邊的 向下箭頭，選擇 「編輯 HTML」(Edit HTML)。
3. 在程式碼區域內點一下，按 Ctrl + F (Mac 用 Cmd + F) 搜尋 </head> 標籤。
4. 將下方的 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>

5. 點擊右上角的 「儲存」(磁碟圖示)。

💡 樣式微調建議

• 文字顏色： 如果你的網站背景偏暗色系，建議將程式碼第 3 區塊中的 color: #333333 !important; 改為白色 color: #ffffff !important;，這樣打字時才看得見。
• 底線樣式： 為了避免搜尋框完全透明導致訪客找不到輸入位置，我在語法中加入了一條透明度 0.3 的黑色底線（border-bottom）。你也可以依照網站風格，將其改為白色半透明 rgba(255, 255, 255, 0.5)，或是直接移除該行。

儲存並重新整理網頁後，無論螢幕尺寸怎麼縮放，那個頑固的灰框和捲軸就會徹底消失，還給你一個乾淨俐落的版面了！