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报告）。输入值并且输入失去焦点后，占位符将再次出现在值的顶部。有两种方法可以解决这个问题。第一个是纯CSS再次使用:invalid伪类，它还需要输入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>

Answer 2

如果您要使用标准输入[type = text]，则无法进行此操作。

您可以通过div创建“输入”并将contenteditable设置为true。

<div contenteditable="true" id="input">
<strong>Please enter here.</strong> Please also be reminded that you can only enter once.</div>

将其重新创建为带有css的输入字段。

<style type="text/css">
#input {
border: 1px solid black;
width: 420px;
font-size: 12px;
font-family: Arial;
padding: 5px;
</style>

我上传了一个演示here。

编辑：有人提到没有删除占位符文字。一个简单的jQuery代码修复了这个问题。

$("#input").html("");

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

2 个答案:

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