是否可以在 <input placeholder="Name*"> 中设置字符串的一部分

Question

我将 ContactForm7 用于 wordpress。它正在为我生成表格。我想在输入标签中设置星号的样式，但由于 CF7 的可编辑区域是短代码，我认为我不能这样做。如果我的代码输出如下所示：

<input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Email*">

有没有办法（使用 css）或（如果需要，使用 jquery）从 placeholder="Name*" 中只选择星号，这样我就可以在不影响“占位符”一词的颜色的情况下更改颜色？

Answer 1

您可以定位输入的容器并向其添加伪元素。不过，您需要非常精确地定位它...

注意此 sn-p 假定容器是表单元素，并且您可以更改占位符文本以删除原始星号。

form {
  position: relative;
}

form::after {
  content: "*";
  color: red;
  position: absolute;
  left: 35px;
  opacity: .8;
}

<form action="">
  <input type="text" name="email" value="" size="40" placeholder="Email">
</form>

Answer 2

这是我评论中的建议。

HTML

<input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Email" />

CSS

.placeholder-label {
  display: inline-block;
  position: absolute;
  color: grey;
  padding: 2px 3px;
}

.placeholder-label em {
  color: red;
}

JavaScript

$(function() {
  function makeRequiredLabel($o) {
    $o.each(function(ind, el) {
      var ph = $(el).attr("placeholder");
      $(el).attr("placeholder", "");
      var $label = $("<label>", {
        class: "placeholder-label"
      }).html(ph + " <em>*</em>");
      $label.insertAfter($(el)).css({
        top: $(el).position().top + "px",
        left: $(el).position().left + "px"
      });
    });
  }

  makeRequiredLabel($(".wpcf7-validates-as-required"));
  $(".wpcf7-validates-as-required").on("click focus blur focusOut", function(e){
    var target = $(this).next(".placeholder-label");
    switch(e.type){
      case "click":
      case "focus":
         target.hide();
         break;
      case "blur":
      case "focusOut":
         if($(this).val() === ""){
           target.show();
         }
    }
  });
});

如果你在 jQuery UI 库中添加，你可以让它成为它自己的小部件。

示例：https://jsfiddle.net/Twisty/aLvypLv8/

JavaScript

$(function() {
  $.widget("custom.requiredLabel", {
    options: {
      labelColor: "grey",
      labelFont: "Arial",
      starColor: "red"
    },
    _create: function() {
      this.placeholder = this.element.attr("placeholder");
      this.element.attr("placeholder", "");
      this._on(this.element, {
        click: "hide",
        focus: "hide",
        blur: "show",
        focusOut: "show"
      });
      this._createRequired();
    },
    _createRequired: function() {
      this.label = $("<label>", {
          class: "ui-require-label"
        }).css({
          display: "inline-block",
          position: "absolute",
          color: this.options.labelColor,
          "font-family": this.options.labelFont,
          padding: "2px 3px"
        })
        .append(this.placeholder, " ", $("<em>", {
          style: "color: " + this.options.starColor + ";"
        }).html("*"))
        .insertAfter(this.element).css({
          top: this.element.position().top + "px",
          left: this.element.position().left + "px"
        });
      this.element.focus(function() {
        this.label.hide();
      });
      this.element.blur(function() {
        if (this.element.val() == "") {
          this.lebal.show();
        }
      });
    },
    _setOptions: function() {
      this.superApply(arguments);
    },
    _setOption: function(key, val) {
      if (/labelColor|labelFont|starColor/.test(key)) {
        return;
      } else {
        this._super(key, value);
      }
    },
    _refresh: function() {
      this.label.css({
        color: this.options.labelColor,
        "font-family": this.options.labelFont,
      });
      this.label.find("em").css("color", this.options.starColor);
    },
    hide: function(event) {
      this.label.hide();
    },
    show: function(event) {
      if (this.element.val() === "") {
        this.label.show();
      }
    }
  });

  $(".wpcf7-validates-as-required").requiredLabel({
    labelColor: "#cfcfcf",
    starColor: "#ff9999"
  });
});