Html 仅更改输入占位符*颜色

我有多个输入字段一些字段是

必填的

和带有

*

的必填字段，因此我只需要更改输入占位符

*

颜色，不更改整个占位符颜色检查下面的图片我到底需要什么

我尝试了下面的代码来实现这一点，但它可以改变占位符的整个颜色

div{
利润率：10px 0px；
}
输入{
宽度：200px；
边界：无；
边框底部：实心1px#8d97a0；
填充物：5px；
边界半径：0；
背景：#fff；
盒影：无；
}
：-webkit输入占位符{
颜色：红色；
}

---

检查此项……您可以使用

:before和：after

实现您的要求，对于输入标记，不支持

:before和：after

。因此，您可以通过将标签添加到输入中，并将

：before和：after

CSS添加到标签中来实现这一点

输入{
宽度：160px；
}
输入[必需]+标签{
颜色：#999；
字体系列：Arial；
字体大小：.8em；
位置：相对位置；
左：-166px；/*输入宽度的负数*/
}
输入[必需]+标签：之后{
内容：“*”；
颜色：红色；
}
/*当输入没有内容时显示占位符（无内容=无效）*/
输入[必需]：无效+标签{
显示：内联块；
}
/*当输入中键入了一些文本时隐藏占位符*/
输入[必需]：有效+标签{
显示：无；
}

密码

只是

占位符

不会给出不同的

样式

。如果你想要不同的样式，你需要像这样分开

输入{
宽度：自动；
}
输入+标签{
颜色：#999；
字体系列：Arial；
字体大小：.8em；
位置：相对位置；
左：-166px；
}
输入[必需]+标签：之后{
内容：“*”；
颜色：红色；
}
输入[必需]：无效+标签{
显示：内联块；
}
输入[必需]：有效+标签{
显示：无；
}

密码

见此：

$（文档）.ready（函数（）{
$（'.colorHolder'）。单击（函数（）{
$（'.havePlace'，this.focus（）；
})
$（'.havePlace'）。在（'input'，function（）上{
var len=（$（this.val（））.length；
如果（len）
$（this.next（'label'）.hide（）；
其他的
$（this.next（'label'）.show（）；
})
})

输入{
宽度：150px；
边界：无；
边框底部：实心1px#8d97a0；
填充物：5px；
边界半径：0；
背景：#fff；
盒影：无；
大纲：无；
}
.持色器{
位置：相对位置；
边缘底部：20px；
显示：内联块；
}
.colorHolder.havePlace+标签{
位置：绝对位置；
左：7px；
底部：2px；
颜色：#CCC；
光标：文本；
}
.colorHolder.havePlace+标签：后{
内容：“*”；
颜色：红色；
}

密码
电子邮件
正文

也许您可以在占位符中使用span，以便更改*

$（函数（）{
$（“.holder+input”）.keyup（函数（）{
if（$（this.val（）.length）{
$（this.prev（'.holder'）.hide（）；
}否则{
$（this.prev（'.holder'）.show（）；
}
});
$（“.holder”）。单击（函数（）{
$（this.next（）.focus（）；
});
});
.holder{
位置：绝对位置；
保证金：5px 5px；
光标：自动；
字号：11pt；
z指数：1；
}
瑞德先生{
颜色：红色；
}

电子邮件地址*
试试这个：


标签{
显示：内联块；
宽度：100%；
背景：线性梯度（向右，#999 6em，红色5em）；
边框：2个实心#ccc；
字体系列：monospace；/*对于屏幕上文本的长度不太令人惊讶*/
}
输入{
字体大小：粗体；
宽度：100%；
高度：20px；
填充：10px；
边界：无；
显示：块；
大纲：无；
}
输入：仅当显示占位符时，文本的{/*颜色部分无效*/
混合模式：屏幕；
}
对于当前的标记，我认为仅使用CSS是不可能的，但是：

如果可以在输入后添加
标签
元素，则可以使用，如下所示：

<div>
  <input type="password" name="password" id="password" placeholder=" " />
  <label for="password">Password</label>
</div>

这意味着：当显示输入的占位符时-显示“占位符”标签。（否则我们就把它藏起来）

因此，我们仍然需要在输入上设置一个非空占位符属性（一个简单的空白就足够了）


div{
位置：相对位置；
}
标签{
位置：绝对位置；
高度：20px；
左：5px；
排名：0；
底部：0；
保证金：自动；
显示：无；
指针事件：无；
颜色：#7575；
字体大小：16px；
字体系列：系统界面；
}
标签：后{
内容：“*”；
颜色：红色；
}
输入：显示占位符+标签{
显示：块；
}
输入{
宽度：200px；
边界：无；
边框底部：实心1px#8d97a0；
填充物：5px；
边界半径：0；
背景：#fff；
盒影：无；
高度：20px；
字体大小：16px；
保证金：5px0；
}

名称
密码
我也尝试过，但我不必在输入中使用
标签
和
必需
，请考虑为该标签指定垂直条光标，为了与用户通过将光标悬停在输入字段上看到的内容和期望的内容保持一致，我已经尝试过了，但我不必在InputDemand中使用label和required，所有
*
都以结束而不是开始。我需要的正是上面我上传给你的图片更改了你的答案，但我不能使用这个我有多个字段，所有字段都不是
required[*]
这与required无关，唯一的问题是你是否可以在输入的图片后添加额外的元素！但是占位符和标签看起来不一样，请将手机替换为密码，这样您就可以理解我的意思了，请检查一下。我试图更改
字体大小
占位符和标签，但仍然不一样
input:placeholder-shown + label {
  display: block;
}