HTML 輸入框邊框顯示不一致 (凹凸感) 的 CSS 統一美化方案

現象

輸入框邊框在不同瀏覽器/系統呈現不同的 3D 凹凸邊框 (預設 border-style: inset 或瀏覽器原生樣式)。

解決方案：CSS Reset + 統一樣式

/* 1. 重置瀏覽器預設 */
input, textarea, select {
    border: 1px solid #ccc;       /* 統一實線邊框 */
    border-radius: 4px;           /* 圓角 */
    padding: 6px 10px;            /* 內距 */
    font: inherit;                /* 繼承字體 */
    box-sizing: border-box;       /* 盒模型 */
    outline: none;                /* 移除焦點外框 (可選) */
    transition: border-color .2s, box-shadow .2s;
}

/* 2. 狀態美化 */
input:focus, textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,.15);
}

input:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }

進階：使用成熟 UI 庫

• Bootstrap 5：<input class="form-control"> 一行搞定。
• Tailwind CSS：<input class="border rounded px-3 py-2 focus:ring focus:border-blue-500">。
• Ant Design / Element Plus (React/Vue) 提供高階封裝元件。

總結

瀏覽器原生表單樣式差異極大，**務必用 CSS 明確定義 border、radius、padding、focus 狀態**，或直接引入 UI 庫，才能獲得跨平台一致的視覺體驗。