Html 如何在占位符中添加红色星号？

我正在用占位符中的问题构建一个表单。 现在我想要一个红色星号作为必填字段。 通常我们可以使用span为星号指定不同的样式，但在我的情况下，我不能在占位符中添加span

* { 保证金：0； 填充：0； 字体系列：Arial、Helvetica、无衬线字体； } 身体{ 背景图像：线性梯度rgba0,0,0,0.8，rgba0,0,0,0.8，url/assets/1.png； 背景位置：中心； 背景尺寸：封面； } .集装箱{ 宽度：80%； 最大宽度：700px； 最小高度：520px； 高度：自动； 利润率：8%自动； 背景：fff； 边界半径：15px； 位置：相对位置； 填充：90px0； 溢出：自动； } 氢{ 文本对齐：居中； 边缘底部：80px； 颜色：333； } .货柜表格{ 宽度：280px； 文本对齐：居中； 保证金：0自动； 位置：绝对位置； 左：0； 右：0； 保证金：自动； } 表单输入{ 宽度：100%； 填充：10px 5px； 利润率：10px0； 边界：0； 边框底部：1px实心999； 大纲：无； 背景：透明； } ：：占位符{ 颜色：777； } .btn盒{ 宽度：100%； 保证金：30px自动30px自动； 文本对齐：居中； } 让我们开始建造吧！ 下一个

---

这并不理想，但既然你说你不能添加元素，也没有提到使用JS，我尝试了一个只使用css的解决方案……同样，这不是一个理想的情况。我不知道在这页之前或之后会发生什么。我在包含按钮的div上使用：：before添加了星号，并将其设置为position:relative，而星号设置为position:absolute，并移动到输入字段旁边。我准备好了干草叉和火把

/*-----------------*/ 输入[type=email][required]+.btn box:：before{ 内容：*； 颜色：红色； 显示：块； 位置：绝对位置； 顶部：-70px； 左：-10px； } 输入[类型=电子邮件][必需]+.btn框{ 位置：相对位置； } /*-----------------*/ * { 保证金：0； 填充：0； 字体系列：Arial、Helvetica、无衬线字体； } 身体{ 背景图像：线性梯度rgba0,0,0,0.8，rgba0,0,0,0.8，url/assets/1.png； 背景位置：中心； 背景尺寸：封面； } .集装箱{ 宽度：80%； 最大宽度：700px； 最小高度：520px； 高度：自动； 利润率：8%自动； 背景：fff； 边界半径：15px； 位置：相对位置； 填充：90px0； 溢出：自动； } 氢{ 文本对齐：居中； 边缘底部：80px； 颜色：333； } .货柜表格{ 宽度：280px； 文本对齐：居中； 保证金：0自动； 位置：绝对位置； 左：0； 右：0； 保证金：自动； } 表单输入{ 宽度：100%； 填充：10px 5px； 利润率：10px0； 边界：0； 边框底部：1px实心999； 大纲：无； 背景：透明； } ：：占位符{ 颜色：777； } .btn盒{ 宽度：100%； 保证金：30px自动30px自动； 文本对齐：居中； } 让我们开始建造吧！ 下一个

---

这并不理想，但既然你说你不能添加元素，也没有提到使用JS，我尝试了一个只使用css的解决方案……同样，这不是一个理想的情况。我不知道在这页之前或之后会发生什么。我在包含按钮的div上使用：：before添加了星号，并将其设置为position:relative，而星号设置为position:absolute，并移动到输入字段旁边。我准备好了干草叉和火把

/*-----------------*/ 输入[type=email][required]+.btn box:：before{ 内容：*； 颜色：红色； 显示：块； 位置：绝对位置； 顶部：-70px； 左：-10px； } 输入[类型=电子邮件][必需]+.btn框{ 位置：相对位置； } /*-----------------*/ * { 保证金：0； 填充：0； 字体系列：Arial、Helvetica、无衬线字体； } 身体{ 背景图像：线性梯度rgba0,0,0,0.8，rgba0,0,0,0.8，url/assets/1.png； 背景位置：中心； 背景尺寸：封面； } .集装箱{ 宽度：80%； 最大宽度：700px； 最小高度：520px； 高度：自动； 利润率：8%自动； 背景：fff； 边界半径：15px； 位置：相对位置； 填充：90px0； 溢出：自动； } 氢{ 文本对齐：居中； 边缘底部：80px； 颜色：333； } .货柜表格{ 宽度：280px； 文本对齐：居中； 保证金：0自动； 位置：绝对位置； 左：0； 右：0； 保证金：自动； } 表单输入{ 宽度：100%； 填充：10px 5px； 利润率：10px0； 边界：0； 边框底部：1px实心999； 大纲：无； 背景：透明； } ：：占位符{ 颜色：777； } .btn盒{ 宽度：100%； 保证金：30px自动30px自动； 文本对齐：居中； } 让我们开始建造吧！ 下一个

---

如果您可以添加到HTML中，则与输入相关联的标签将非常有用，请参见示例

将元素与元素关联具有一些主要优点：

标签文本不仅在视觉上与其对应的 文本输入；它也以编程方式与之关联。这意味着 例如，屏幕阅读器将读取 当 用户将注意力集中在表单输入上，这使得辅助输入变得更容易 技术用户了解应输入哪些数据。你可以 单击关联的标签以聚焦/激活输入以及 输入本身。这个增加的命中区域为任何人都提供了优势 尝试激活输入，包括使用触摸屏的输入 装置

它在占位符消失后保留，以便提醒用户需要什么，并且您可以格式化它。例如：

* { 保证金：0； 填充：0； 字体系列：Arial、Helvetica、无衬线字体； } 身体{ 背景图像：线性梯度rgba0,0,0,0.8，rgba0,0,0,0.8，url/assets/1.png； 背景位置：中心； 背景尺寸：封面； } .集装箱{ 宽度：80%； 最大宽度：700px； 最小高度：520px； 高度：自动； 利润率：8%自动； 背景：fff； 边界半径：15px； 位置：相对位置； 填充：90px0； 溢出：自动； } 氢{ 文本对齐：居中； 边缘底部：80px； 颜色：333； } .货柜表格{ 宽度：280px； 文本对齐：居中； 保证金：0自动； 位置：绝对位置； 左：0； 右：0； 保证金：自动； } 表单输入{ 宽度：100%； 填充：10px 5px； 利润率：10px0； 边界：0； 边框底部：1px实心999； 大纲：无； 背景：透明； } 标签[用于=电子邮件]：：之后{ 内容：“必选”； 颜色：红色； } 输入[必需]{ 边框：纯红； } ：：占位符{ 颜色：777； } .btn盒{ 宽度：100%； 保证金：30px自动30px自动； 文本对齐：居中； } 让我们开始建造吧！ 请输入您的电子邮件地址 下一个

---

如果您可以添加到HTML中，则与输入相关联的标签将非常有用，请参见示例

将元素与元素关联具有一些主要优点：

标签文本不仅在视觉上与其对应的 文本输入；它也以编程方式与之关联。这意味着 例如，屏幕阅读器将在 用户将注意力集中在表单输入上，这使得辅助输入变得更容易 技术用户了解应输入哪些数据。你可以 单击关联的标签以聚焦/激活输入以及 输入本身。这个增加的命中区域为任何人都提供了优势 尝试激活输入，包括使用触摸屏的输入 装置

它在占位符消失后保留，以便提醒用户需要什么，并且您可以格式化它。例如：

* { 保证金：0； 填充：0； 字体系列：Arial、Helvetica、无衬线字体； } 身体{ 背景图像：线性梯度rgba0,0,0,0.8，rgba0,0,0,0.8，url/assets/1.png； 背景位置：中心； 背景尺寸：封面； } .集装箱{ 宽度：80%； 最大宽度：700px； 最小高度：520px； 高度：自动； 利润率：8%自动； 背景：fff； 边界半径：15px； 位置：相对位置； 填充：90px0； 溢出：自动； } 氢{ 文本对齐：居中； 边缘底部：80px； 颜色：333； } .货柜表格{ 宽度：280px； 文本对齐：居中； 保证金：0自动； 位置：绝对位置； 左：0； 右：0； 保证金：自动； } 表单输入{ 宽度：100%； 填充：10px 5px； 利润率：10px0； 边界：0； 边框底部：1px实心999； 大纲：无； 背景：透明； } 标签[用于=电子邮件]：：之后{ 内容：“必选”； 颜色：红色； } 输入[必需]{ 边框：纯红； } ：：占位符{ 颜色：777； } .btn盒{ 宽度：100%； 保证金：30px自动30px自动； 文本对齐：居中； } 让我们开始建造吧！ 请输入您的电子邮件地址 下一个

---

我可以很有把握地假设，OP aka原创海报之所以不使用a，是因为它的宽度：100%。每当display:inline ie或inline块继续执行宽度为100%的元素时，该元素将被迫占据宽度为100%的前一个元素下方的空间

只需减小屏幕的宽度并使用 演示A和OP的演示完全一样，除了宽度：90%和A*继续

演示B和演示C是经过改进的版本，它们：

使用like和。 删除了一些无效的样式。 已经移除了。 已经改变了页边空白、填充、文本对齐和字体大小，这在我看来是非常好的。 已删除属性type='button'。请参见下面的一节。 此外，演示B还使用以下内容显示星号：

为了语义的缘故，A代替了A。 此外，Demo C使用以下命令显示星号：

CSS属性被分配给元素，而不是实际使用一个额外的元素，如a或在前面的演示中使用。 注意：在所有演示中，一个特殊的字符用于实际的星号。这个角色出现在行的顶部，很像一个超级脚本角色

---

另外请注意：字体大小是绝对值px我可以很安全地假设OP aka原创海报不使用a的原因是因为ha 宽度：100%。每当display:inline ie或inline块继续执行宽度为100%的元素时，该元素将被迫占据宽度为100%的前一个元素下方的空间

只需减小屏幕的宽度并使用 演示A和OP的演示完全一样，除了宽度：90%和A*继续

演示B和演示C是经过改进的版本，它们：

使用like和。 删除了一些无效的样式。 已经移除了。 已经改变了页边空白、填充、文本对齐和字体大小，这在我看来是非常好的。 已删除属性type='button'。请参见下面的一节。 此外，演示B还使用以下内容显示星号：

为了语义的缘故，A代替了A。 此外，Demo C使用以下命令显示星号：

CSS属性被分配给元素，而不是实际使用一个额外的元素，如a或在前面的演示中使用。 注意：在所有演示中，一个特殊的字符用于实际的星号。这个角色出现在行的顶部，很像一个超级脚本角色

---

---

另外请注意：字体大小是绝对值！在Stack Overflow中，解释您已经尝试了什么以及为什么不起作用是非常有帮助的。你确实提到了一些可能有用的东西，但看起来你没有解释为什么它不起作用，或者解决方案有什么困难或令人困惑。这将非常有助于回答你的问题。我提到了上述内容，因为你在链接中发布的内容似乎可以解决你的问题。因此，很高兴知道您尝试了什么以及为什么不起作用。。。发布您期望可以工作但没有工作的坏代码是一个很好的方式来说明这一点，因为您没有太多的控制权。你真的不想在占位符中出现，是吗？你不想在他们开始打字后看到红色星号吗？哦。。。是的，我尝试了链接，但没有成功。我发布了那个链接，因为我认为可以根据我表单的代码调整代码。因为我是新手，我做不到。@TimRoberts是的，这是个好主意，但我们怎么做？欢迎！在Stack Overflow中，解释您已经尝试了什么以及为什么不起作用是非常有帮助的。你确实提到了一些可能有用的东西，但看起来你没有解释为什么它不起作用，或者解决方案有什么困难或令人困惑。这将非常有助于回答你的问题。我提到了上述内容，因为你在链接中发布的内容似乎可以解决你的问题。因此，很高兴知道您尝试了什么以及为什么不起作用。。。发布您期望可以工作但没有工作的坏代码是一个很好的方式来说明这一点，因为您没有太多的控制权。你真的不想在占位符中出现，是吗？你不想在他们开始打字后看到红色星号吗？哦。。。是的，我尝试了链接，但没有成功。我发布了那个链接，因为我认为可以根据我表单的代码调整代码。因为我是新手，我做不到。@TimRoberts是的，这是个好主意，但我们怎么做？谢谢！如果我可以添加更多元素或使用JS呢？能再理想点吗？谢谢！如果我可以添加更多元素或使用JS呢？能再理想点吗？谢谢！！成功了！还有，帮助我了解新事物。什么是B或C更好？还有，你能给我解释一下为什么和？我是新来的，如果我的演示有反应呢？对此可以做些什么改变？我将简要回答的所有有效问题：1。B更像是HTML。C更像CSS。但两者都能完成任务。2.他们是。3.所有长度值的99%是相对的ex.%，em，vw等，而不是绝对的ex.px。还必须考虑布局和媒体查询等其他因素，请参阅上的这篇文章。谢谢！！成功了！还有，帮助我了解新事物。什么是B或C更好？还有，你能给我解释一下为什么和？我是新来的，如果我的演示有反应呢？对此可以做些什么改变？我将简要回答的所有有效问题：1。B更像是HTML。C更像CSS。但两者都能完成任务。2.他们是。3.所有长度值的99%是相对的ex.%，em，vw等，而不是绝对的ex.px。还必须考虑布局和媒体查询等其他因素，请参阅本文。