Different colors in placeholder [duplicate]

Answer 1

The appearance of the placeholder property of 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.

If you wanted to accomplish this, you would likely need to use something to explicitly override the element with a

that contained your Name* content to overlay on your 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;
}

    

        
        

            Name*
        

0 讨论(0)

发布评论:

提交评论

---

•  加载中...