Html 将多个样式应用于输入元素中的单个占位符

我在表单上有一个基本的输入元素：

但我想按照以下设计设置占位符的样式：

目前我有以下几种款式：

：：-webkit输入占位符，：：-moz占位符，：-ms输入占位符，输入：-moz占位符{
颜色：白色；
}

---

显然，这不能处理浅蓝色的“或”文本。如果可能的话，我很乐意使用CSS3。是否可以仅使用CSS设置样式？

我看到的唯一解决方案是避免使用占位符，并用javascript替换其行为。老办法

HTML

<div class="location">
    <span class="holder">Location <span class="blue">or</span> Place</span>
  <input id="input" size="18" type="text" />&nbsp;
</div>

CSS

div.location > span.holder {
position: absolute;
margin: 5px 8px;
color: #ddd;
cursor: auto;
font-family: Helvetica;
font-size: 11pt;
z-index: 1;
}

div.location > span.holder > span.blue{
    color: #819FF7;
}

div input {
    padding:5px;
    font-size:11pt;
    background-color: #0B7DAB;
    color: white;
     border-radius:15px;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
    border: none;
}

---

如果有人想知道2016年是否可行，但这只能通过css实现，使用

：valid

选择器：

HTML:

---

它显示白色，我检查过了，请看演示，很有趣，但我想不出任何方法。您可以设置一种颜色，但必须这样做：：-webkit输入占位符{color:white；}，：：-moz占位符{color:white}，。。。我认为你们不能给占位符添加其他颜色（span或其他任何颜色）。

div.location > span.holder {
position: absolute;
margin: 5px 8px;
color: #ddd;
cursor: auto;
font-family: Helvetica;
font-size: 11pt;
z-index: 1;
}

div.location > span.holder > span.blue{
    color: #819FF7;
}

div input {
    padding:5px;
    font-size:11pt;
    background-color: #0B7DAB;
    color: white;
     border-radius:15px;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
    border: none;
}

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

.holder {
  position: relative;
}

input[required="required"]:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  top: 2px;
  left: 2px;
  color: green;

}

.placeholder span {
  color: red;
}