CSS中的Input元素是網站中使用頻率極高的元素之一，我們經常會看到表單中各種不同的輸入框，如文字方塊、單選框、多重選取框等。但是，這些元素的預設顏色並不一定符合我們網站的風格要求，那麼如何改變Input元素的顏色呢？本文將介紹多種方法來實現Input元素的顏色改變。
一、透過CSS修改Input元素的顏色
在CSS中，我們可以使用background-color屬性來設定Input元素的背景色，如下所示：
input{
background-color: #cccccc;
}
這樣設定以後，Input元素的顏色就會變成灰色。我們還可以設定其他屬性，如文字顏色、邊框顏色等。例如：
input{
background-color: #ffffff; color: #333; border: 1px solid #333;
}
以上程式碼的意思是，將Input元素的背景色設定成白色，文字顏色設定成深灰色，邊框顏色設定成黑色。
二、透過CSS修改Input元素的焦點顏色
當使用者點擊Input元素後，我們也可能要修改其顏色。這時候需要使用:focus偽類。例如：
input:focus{
background-color: #f8e5a1; color: #333; border: 1px solid #333;
}
這樣設定以後，當使用者點選Input元素時，其背景色會變成黃色，文字顏色和邊框顏色不變。
三、透過CSS修改Input元素的hover顏色
我們也可以透過:hover偽類別來修改滑鼠懸停在Input元素上時的顏色。例如：
input:hover{
background-color: #f5f5f5;
}
這樣設定以後，當滑鼠停留在Input元素上方時，其背景色會變成淺灰色。
四、透過CSS修改不同類型的Input元素的顏色
不同類型的Input元素包括文字方塊、單選方塊、多重選取方塊、按鈕等。我們可以使用不同的CSS選擇器來選擇不同類型的Input元素，然後修改其顏色。例如：
input[type="text"]{
background-color: #ffffff; color: #333; border: 1px solid #ccc;
}
#上面的程式碼表示選擇文字方塊類型的Input元素，將其背景色設為白色，文字顏色設定成深灰色，邊框顏色設定成淺灰色。
input[type="checkbox"]{
/*设置复选框的颜色*/
}
#input[type="radio"]{
/*设置单选框的颜色*/
}
/*设置提交按钮的颜色*/
text.style.backgroundColor = "#ff0000";
以上是css input顏色改變的詳細內容。更多資訊請關注PHP中文網其他相關文章！
