在表单的占位符内添加跨度

Posted 2023-03-05

【中文标题】在表单的占位符内添加跨度

【英文标题】：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>