如何修改input输入框中键入email内容时的文字颜色

你可以通过CSS的color属性匹配对应元素实现效果，以下是两种常用实现方案：

方案1：全局匹配所有email类型输入框 #

直接通过属性选择器选中所有type="email"的input元素，所有同类型输入框都会生效，你现有的HTML代码无需修改：

input[type="email"] {
  /* 替换为你需要的颜色值，支持十六进制、RGB/RGBA、颜色名等标准CSS颜色格式 */
  color: #165DFF;
}

方案2：仅修改指定输入框 #

如果不想影响其他email输入框，可以给目标输入框自定义类名：

第一步：修改HTML代码，新增class属性 #

<form action="">
  <input type="email" name="mail" id="" class="email-input-custom" placeholder="Your Email">
</form>

第二步：添加对应CSS样式 #

.email-input-custom {
  color: #27AE60;
}

可选：修改占位符文字颜色 #

如果需要同步修改输入框内默认提示的占位符颜色，可以添加以下兼容多浏览器的样式：

/* Chrome、Safari、新版Edge、Opera */
input[type="email"]::placeholder {
  color: #AAAAAA;
  opacity: 1; /* 修复Firefox默认透明度降低的问题 */
}
/* IE10-11 */
input[type="email"]:-ms-input-placeholder {
  color: #AAAAAA;
}
/* 旧版Edge */
input[type="email"]::-ms-input-placeholder {
  color: #AAAAAA;
}

内容的提问来源于stack exchange，提问作者Ahmed Modther