在表单的占位符中添加span

Question

我想在我的表单的占位符中添加一个颜色asterix，这可能吗？

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

Answer 2

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

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

Fiddle

Answer 3

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

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

另一个解决方案是在输入字段之外添加span（和占位符文本），但是这需要一些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();
    } );

Answer 4

我找到了一个可能适合你的jQuery插件，pholder插件 如果您看一下演示，那就是＆＃34;名称＆＃34;的平板电脑。场是红色的。

可能有其他插件或者您可以编辑它。 ：）

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

Answer 6

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

.someclass {
      position:relative;
}

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

...适应您自己的布局。

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