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

Question

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

<input type="text" name="where" placeholder="Location or Place">

但是我想用下面的设计内嵌占位符：

目前，我有以下款式：

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, input:-moz-placeholder {
    color: white;
}

显然，这并不能处理浅蓝色或“蓝色”。文本。我很乐意尽可能使用CSS3。可以使用CSS来设计这个样式吗？

Answer 1

我看到的唯一解决方案是避免使用占位符并用javascript替换其行为。旧式的方式！

<强> See this demo

<强> HTML

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

<强>的Javascript

$(function() {
    $("span.holder + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });
    $("span.holder").click(function() {
        $(this).next().focus();
    });
});

<强> 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;
}

Answer 2

如果有人想知道2016年是否有可能，但只能使用css实现:valid选择器：

HTML：

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

CSS：

.holder {
  position: relative;
}

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

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

}

.placeholder span {
  color: red;
}

demo fiddle