如何设置输入占位符的各个部分的样式？

Question

是否可以设置输入占位符的各个部分的样式？一个例子:

请在这里输入.另请注意,您只能输入一次.

Answer 1

你不能用标准placeholder属性做到这一点.我将详细说明另一种方法,使用输入元素的一些包装器制作自定义占位符.

HTML

<div class="placeholder-wrap">
    <input type="text" name="userName" />
    <span class="placeholder">
        This is a <b class="important">placeholder</b>
    </span>
</div>

CSS:

.placeholder-wrap {
    margin: 20px;
    display: inline-block;
    position: relative;
    background: #FFF;
}
.placeholder-wrap .placeholder {
    position: absolute;
    top: 50%;
    left: 5px;
    color: #888;
    margin-top: -.5em;
    line-height: 1em;
    z-index: 9;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.placeholder-wrap input {
    background-color: transparent;
    border: 1px #999 solid;
    padding: 4px 6px;
    position: relative;
    z-index: 10;
}
.placeholder-wrap input:focus + .placeholder {
    display: none;
}

是的,相当多的代码,但给你一些风格的灵活性.

演示:http://jsfiddle.net/dfsq/xD5Lq/

UPD.但是有一个问题(感谢@AlexG报告).输入值并且输入失去焦点后,占位符将再次出现在值的顶部.有两种方法可以解决这个问题.第一个是使用:invalid伪类的纯CSS ,它还需要required输入属性:

.placeholder-wrap {
    display: inline-block;
    position: relative;
    background: #FFF;
    overflow: hidden;
}
.placeholder-wrap .placeholder {
    position: absolute;
    top: 50%;
    left: 5px;
    color: #888;
    margin-top: -.5em;
    line-height: 1em;
    z-index: 9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.placeholder-wrap input {
    background-color: transparent;
    border: 1px #999 solid;
    padding: 4px 6px;
    position: relative;
    z-index: 10;
}
.placeholder-wrap input:focus + .placeholder,
.placeholder-wrap input[required]:valid + .placeholder,
.placeholder-wrap input.not-empty + .placeholder {
    display: none;
}


input {width: 300px;}
.important {color: brown;}

<p>CSS fix</p>

<div class="placeholder-wrap">
    <input type="text" name="userName" required />
    <span class="placeholder">
        This is a <b class="important">placeholder</b> long text goes here
    </span>
</div>

<p>Javascript fix</p>

<div class="placeholder-wrap">
    <input type="text" name="userName" 
           onchange="this.className = this.value 
             ? this.className + ' not-empty'
             : this.className.replace(/\bnot-empty\b/, '')" 
    />
    <span class="placeholder">
        This is a <b class="important">placeholder</b> long text goes here
    </span>
</div>