如何自定義輸入框聚焦樣式？1. 使用:focus偽類修改border-color、box-shadow、background-color等屬性；2. 可添加transition實現平滑動畫；3. 通過JavaScript監聽focus/blur事件兼容舊瀏覽器；4. 配合其他偽類如:hover、:valid等增強交互。例如設置input:focus時改變邊框顏色并添加陰影，或使用javascript動態添加.focused類確保兼容性，同時考慮可訪問性，避免僅依賴默認outline。
聚焦效果，簡單來說，就是當你的鼠標或者鍵盤選中html頁面上的輸入框（、
聚焦效果，可以通過css的:focus偽類來實現。
input:focus { border-color: #4CAF50; /* 綠色 */ box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* 添加陰影，更醒目 */ } textarea:focus { background-color: #f0f8ff; /* 淡藍色背景 */ }
如何自定義輸入框的聚焦樣式？
想要自定義輸入框的聚焦樣式，:focus偽類提供了很大的靈活性。除了上面提到的border-color和box-shadow，你還可以修改background-color、color、outline等屬性。
立即學習“前端免費學習筆記（深入）”；
例如，如果你想移除默認的藍色邊框（有時瀏覽器會默認添加），可以設置outline: none;。但注意，移除outline后，最好提供其他視覺反饋，以保證可訪問性。
input:focus { outline: none; /* 移除默認邊框 */ border: 2px solid #007bff; /* 添加自定義邊框 */ }
更進一步，你甚至可以使用transition屬性來添加動畫效果，讓聚焦效果更平滑。
input { transition: border-color 0.3s ease; /* 平滑過渡 */ } input:focus { border-color: #dc3545; /* 紅色 */ }
如何解決聚焦樣式在不同瀏覽器下的兼容性問題？
雖然:focus偽類得到了廣泛支持，但在一些老版本的瀏覽器上可能會有一些兼容性問題。特別是ie瀏覽器，可能需要一些額外的處理。
一個常見的做法是使用JavaScript來模擬:focus效果。例如，你可以監聽focus和blur事件，然后添加或移除CSS類。
const inputs = document.querySelectorAll('input, textarea'); inputs.forEach(input => { input.addEventListener('focus', () => { input.classList.add('focused'); }); input.addEventListener('blur', () => { input.classList.remove('focused'); }); });
然后在CSS中定義.focused類的樣式：
.focused { border-color: #ffc107; /* 黃色 */ }
這種方法雖然稍微復雜一些，但可以確保在各種瀏覽器下都能獲得一致的聚焦效果。
另外，還可以考慮使用一些CSS Reset或Normalize工具，它們可以幫助消除不同瀏覽器之間的默認樣式差異，減少兼容性問題。
除了:focus，還有哪些與輸入框相關的CSS偽類可以使用？
除了:focus，還有一些其他的CSS偽類可以用于定制輸入框的樣式：
- :hover: 鼠標懸停在輸入框上時的樣式。
- :active: 輸入框被激活（例如，鼠標按下但未釋放）時的樣式。
- :disabled: 輸入框被禁用時的樣式。
- :valid: 輸入框內容驗證通過時的樣式（需要配合html5的驗證屬性）。
- :invalid: 輸入框內容驗證失敗時的樣式。
- :required: 輸入框是必填項時的樣式。
- :read-only: 輸入框是只讀時的樣式。
合理利用這些偽類，可以創建出更加豐富和交互性強的表單。例如，你可以使用:invalid偽類來提示用戶輸入錯誤的內容：
input:invalid { border-color: #dc3545; /* 紅色，表示錯誤 */ } input:valid { border-color: #28a745; /* 綠色，表示正確 */ }
總的來說，:focus偽類是提升用戶體驗的一個簡單而有效的方法。通過靈活運用CSS和JavaScript，你可以創建出各種各樣的聚焦效果，讓你的表單更加友好和易用。
