如何设置输入占位符的各个部分？ [英] How can I style individual parts of an input placeholder?

问题描述

是否可以设置输入占位符的单个部分？举个例子：

请在此输入。 请注意，您只能输入一次。

解决方案

你不能用标准的占位符属性来做到这一点。我将详细说明另一种方法，使用自定义的占位符，在输入元素周围使用一些包装。

HTML

 < div class =placeholder-wrap> 
< input type =textname =userName/> 
< span class =placeholder> 
这是< b class =important>占位符< / b> 
< / span> 
< / div> 
  

CSS：

  .placeholder-wrap {
 margin：20px; 
 display：inline-block; 
职位：亲属; 
背景：#FFF; 
} 
 .placeholder-wrap .placeholder {
 position：absolute; 
 top：50％; 
 left：5px; 
颜色：＃888; 
 margin-top：-.5em; 
 line-height：1em; 
 z-index：9; 
 overflow：hidden; 
 white-space：nowrap; 
宽度：100％; 
} 
 .placeholder-wrap input {
 background-color：transparent; 
 border：1px＃999 solid; 
 padding：4px 6px; 
职位：亲属; 
 z-index：10; 
} 
 .placeholder-wrap输入：focus + .placeholder {
 display：none; 
 
 $ / code> 

是的，不少代码，但是给你一些样式的灵活性。 / p>



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

UPD 。但是有一个问题（谢谢@AlexG报告）。一旦输入值并且输入失去焦点，占位符将再次出现在值的顶部。有两种方法可以解决这个问题。第一个是纯CSS，使用：invalid 伪类，这也需要输入 required 属性：

  .placeholder-wrap {display：inline-block;位置：相对;背景：#FFF; overflow：hidden;}。placeholder-wrap .placeholder {position：absolute;顶部：50％; left：5px;颜色：＃888; margin-top：-.5em; line-height：1em; z-index：9;溢出：隐藏;文本溢出：省略号;白色空间：nowrap; width：100％;}。placeholder-wrap input {background-color：transparent; border：1px＃999 solid; padding：4px 6px;位置：相对; z-index：10;}。placeholder-wrap input：focus + .placeholder，.placeholder-wrap input [required]：valid + .placeholder，.placeholder-wrap input.not-empty + .placeholder {display：none;}输入{width：300px;}。important {color：brown;}  

< p> CSS修正< / p>< div class =placeholder-wrap> < input type =textname =userNamerequired /> < span class =placeholder>这是< b class =important>占位符< / b> < / div>< p> Javascript修正< / p>< div class =placeholder-wrap> < input type =textname =userNameonchange =this.className = this.value？this.className +'not-empty'：this.className.replace（/ \'not-empty \b / ，''）/> < span class =placeholder>这是< b class =important>占位符< / b> long text goes here< / span>< / div>

Is it possible to style individual parts of an input placeholder? An example:

Please enter here. Please also be reminded that you can only enter once.

解决方案

You can't do that with standard placeholder attribute. I will elaborate on another approach, making custom placeholder with some wrapper around input element.

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

Yes, quite a few code, but gives you some flexibility with styling.

Demo: http://jsfiddle.net/dfsq/xD5Lq/

UPD. There is however a problem (thanks @AlexG for reporting). Once the value is entered and the input loses focus, placeholder appears again on top of the value. There are two ways to address this issue. The first one is pure CSS again using :invalid pseudo-class, which would also need required attribute on input:

.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>

这篇关于如何设置输入占位符的各个部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！