HTML input 標籤直接設定背景樣式的正確寫法

問題現象

開發者嘗試在 <input> 標籤屬性中直接寫入 CSS：

<input ... background-color: #f2f2f2; />

導致樣式無效，原因是 HTML 標籤屬性不支援直接嵌入 CSS 宣告。

正確寫法三種

1. 內聯 style 屬性（最直接）

<input type="hidden" id="username" name="username" 
       value="..." style="background-color: #f2f2f2;" />

2. CSS 類別選擇器（推薦，利於維護）

<style>
.input-bg-gray { background-color: #f2f2f2; }
</style>

<input type="hidden" id="username" name="username" 
       value="..." class="input-bg-gray" />

3. 內嵌/外部樣式表針對型別/ID 設定

<style>
input[type="hidden"]#username { background-color: #f2f2f2; }
/* 或 */
#username { background-color: #f2f2f2; }
</style>

補充說明

• type="hidden" 的輸入框預設不顯示，背景色僅在開發者工具檢視或動態改為可見時生效
• 若需設定輸入框文字顏色，使用 color 屬性
• 表單元素樣式受瀏覽器預設樣式影響大，建議配合 border、padding 微調

完整範例

<!DOCTYPE html>
<html>
<head>
<style>
.form-input { 
    background-color: #f2f2f2; 
    border: 1px solid #ddd; 
    padding: 8px; 
    border-radius: 4px;
}
</style>
</head>
<body>
<form>
    <input type="text" class="form-input" placeholder="一般輸入框" />
    <input type="hidden" id="token" name="token" value="abc123" class="form-input" />
</form>
</body>
</html>