在输入元素中的单个占位符上应用多种样式

Question

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

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

但我想将占位符与以下设计相匹配：

目前，我已经有了以下样式：

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

很明显这个处理方法并不包括浅蓝色的 'or' 文本。如果可能的话，我想使用 CSS3 来实现该效果。是否可以仅用 CSS 来设置样式呢？

- Aidan Ewen

---

它显示白色，我已经检查过了，请查看演示 http://jsbin.com/vufucubi/1 - Just code

有趣的问题，但我想不到任何方法来实现。https://dev59.com/QHE85IYBdhLWcg3wyGt_ - Paulie_D

你可以设置一种颜色，但必须使用 ::-webkit-input-placeholder {color: white;}，::-moz-placeholder {color: white} 等方式。我认为你不能为 placeholder（span 或其他元素）添加另一种颜色。 - Vladislav Stanic

Answer 1

我唯一能想到的解决方案是避免使用占位符，并用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>

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

- Getz

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

- Bogdan Kuštan