占位符中的不同颜色 [英] Different colors in placeholder

问题描述

我有一个带有占位符的输入字段，像这样

I have an input field with placeholder something like this

<input type="text" name="Name" placeholder="Name*">

现在，我希望占位符中的"*"被涂成红色.有办法吗?

Now I want the "*" in the placeholder to be colored RED. Is there a way to do this?

推荐答案

<input>元素的placeholder属性的外观是由浏览器管理的，不能将其分为两个单独的元素，它们仅设计为星号会需要，也不能像这样轻松地设置样式.

The appearance of the placeholder property of <input> elements is managed by the browser and it cannot be separated into two separate elements, which styling just the asterisk would require, nor can it be easily styled as such.

如果要完成此操作，则可能需要使用某些内容来显式覆盖包含<span>Name</span><span style='color:red'>*</span>内容的<div>元素，以类似于<input>元素本身上https://stackoverflow.com/q/22415875/557445>此相关讨论中提到的场景:

If you wanted to accomplish this, you would likely need to use something to explicitly override the element with a <div> that contained your <span>Name</span><span style='color:red'>*</span> content to overlay on your <input> element itself similar to the scenario mentioned in this related discussion :

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 2px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}
.placeholder {
  position: absolute;
  pointer-events: none;
  top: 2px;
  bottom: 2px;
  left: 6px;
  margin: auto;
  color: #ccc;
}
.placeholder span {
  color: red;
}

    <div class="input-placeholder">
        <input type="text" required>
        <div class="placeholder">
            Name<span>*</span>
        </div>
</div>

这篇关于占位符中的不同颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！