【问题标题】：Add span inside form's placeholder在表单的占位符内添加跨度
【发布时间】：2014-04-20 09:16:10
【问题描述】：

我想在表单的占位符中添加一个颜色星号，可以吗？

【问题讨论】：

【解决方案1】：

这里是纯css解决方案IE10+

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 10px;
  font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}

<form novalidate>
    <div class="input-placeholder">
        <input type="text" required>
        <div class="placeholder">
            Email <span>*</span>
        </div>
    </div>
    <input type="submit">
</form>

【讨论】：

【解决方案2】：

乍一看似乎不可能，但它可能是创建自己的假 spanholder 元素的好选择：

<div class="holder">Email Address <span class="red">*</span></div>
<input id="input" size="18" type="text" />

Fiddle

【讨论】：

【解决方案3】：

据我所知，这是不可能的。

我过去见过的一种解决方案是在您的输入字段中添加一个红色星号的背景图像，但这使得复制您想要的视觉对齐变得困难。有关此方法的更多信息：Use CSS to automatically add 'required field' asterisk to form inputs

另一种解决方案是在输入字段之外添加跨度（和占位符文本），但这需要一些 JavaScript 来控制它何时可见和不可见。

这是我刚刚为这个方法创建的一个 JSFiddle（使用 jQuery）：http://jsfiddle.net/nLZr9/

HTML

<form>
    <div class="field">
        <label class="placeholder" for="email">
            Email Address
            <span class="red">*</span>
        </label>
        <input id="email" type="text" />
    </div>
</form>

CSS

.field {
    position: relative;
    height: 30px;
    width: 200px;
}
input, label {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-indent: 5px;
    line-height: 30px;
}

JS

$('.field input')
    .on( 'focus', function () {         
        $(this).siblings('label').hide();
    } )
    .on( 'blur',  function () {
        if ( !$(this).val() )
            $(this).siblings('label').show();
    } );

【讨论】：

【解决方案4】：

我找到了一个可能适合你的 jQuery 插件，pholder 插件。
如果您查看演示，“名称”字段的占位符是红色的。

可能还有其他插件，或者您可以编辑它。 :)

【讨论】：

【解决方案5】：

您可以尝试以下方法：

HTML

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

CSS

.hold {
    position: relative;
}

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

.req_placeholder {
    position: absolute;
    top: 2px;
    left: 2px;
}

.req_placeholder span {
    color: red;
}

【讨论】：

【解决方案6】：

这是伪元素的一个很好的例子。

.someclass {
      position:relative;
}

.someclass:after {
      position:absolute;
      top:0;
      right:10px;
      content: "*";
      color:#ff0000
}

...调整到您自己的布局。

【讨论】：

因为它似乎不起作用，我猜。你测试过这段代码吗？如果你让它工作，请添加一个小提琴或随附的 html。
...打错字了，someclass vs. someClass。现在可以使用了。

【解决方案7】：

您可以在 CSS 中使用伪元素（旧浏览器不支持）

.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #ff0000;
}

<form>
  <p>
    <label for="input1">Input 1:</label>
    <input type="text" id="input1" placeholder="Fill input" class="mandatory" />
  </p>
  <p>
    <label for="input2">Input 2:</label>
    <input type="text" id="input2" placeholder="Fill input" />
  </p>
  <p>
    <label for="textarea">Input 2:</label>
    <textarea id="textarea" placeholder="Fill textarea"></textarea>
  </p>
</form>

【讨论】：