<input placeholder = "Name *">内の文字列の一部をスタイルすることは可能ですか？

Question

私はWordpressのContactForm7を使用しています。それは私のためのフォームを生成しています。私は入力タグでアスタリスクをスタイルしたいと思っていますが、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

入力のコンテナをターゲットにして擬似要素を追加できます。あなたはこのスニペットは、容器は、フォーム要素であり、そしてあなたは、元のアスタリスクを除去するためのプレースホルダーテキストを変化させることができることを前提としてい

注 ...しかし、非常に正確に位置決めする必要があります。ここで

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