css中input输入框颜色

### 设置 Input 输入框的文字颜色和背景颜色

为了设置 `input` 输入框内的文字颜色和背景颜色，可以使用 CSS 中的 `color` 和 `background-color` 属性。

对于基本的颜色设定：

input {
    color: #ff0000;           /* 文字颜色设为红色 */
    background-color: #ffffff; /* 背景颜色设为白色 */
}

上述代码片段展示了如何简单地更改输入框内文本的颜色以及其背后的底色[^1]。

当涉及到更复杂的样式调整时，例如针对不同浏览器引擎下的占位符（placeholder），则需采用特定的选择器。例如，在 WebKit 浏览器中定制占位符文本颜色可如下操作:

/* 针对WebKit浏览器(如Chrome,Safari)*/
.input4::-webkit-input-placeholder{
    color:#999;
}

/* 对于Mozilla Firefox*/
.input4:-moz-placeholder {   
    color:#999;
}

/* 边缘版本较新的Firefox*/
.input4::-moz-placeholder {  
    color:#999;
}

/* Internet Explorer 10+ */
.input4:-ms-input-placeholder { 
    color:#999;
}

此部分代码不仅改变了占位符的颜色，同时也确保了跨浏览器的一致性[^3]。

另外值得注意的是，如果遇到因浏览器自动填充而导致的背景色变化问题，可以通过 `-webkit-autofill` 来控制这些被填充值的表现形式：

input:-webkit-autofill {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #000 !important; /* 强制指定字体颜色 */
    background-color: transparent !important;/* 或者其他期望的背景颜色 */
}

这段代码解决了某些情况下由于系统自动填写数据而引起的视觉不一致现象[^4]。

最后关于整个输入框外观的设计还可以进一步扩展至边框、阴影等方面，从而创建更加美观且用户体验良好的表单控件[^5]。