プレースホルダーの最後の文字の色を設定する方法

Question

プレースホルダーの最後の文字に色を設定できますか？私は関連する解決策を見つけられませんでした。

下の画像で

<input type="text" class="f_name" name="fname" placeholder="First Name*"> 

同様

Answer 1

あなたは、いくつかのトリックでそれを行うことができます： トリック：、プレースホルダーテキストに取り組む必要な入力に「必要な」クラスを追加し、使用：適切な色のアスタリスクを追加するための擬似要素の後。 これは、Webkitブラウザでのみ機能します。

また、スパンを使用すると、ラベルの内側で値のテキストとして機能します。

HTML：

<label><span class="title">Name<span class="symbol">*</span></span> 
     <input type="text" /> 
    </label> 

CSS：

label { 
    position: relative; 
} 
label:hover span { 
    display: none; 
} 
input[type="text"]:focus, input[type="text"]:active { 
    z-index: 2; 
} 
label input[type="text"] { 
    position: relative; 
} 
.title { 
    color: gray; 
    position: absolute; 
    left: 5px; 
    top: 1px; 
    z-index: 1; 
} 
.symbol { 
    color: red; 
} 

入力が満たされているスパンを非表示にするには、いくつかのjqueryの。 JQuery：

$('input[type="text"]').blur(function() { 
    if($(this).val().length >= 1) { 
     $(this).toggleClass('active'); 
    } 
    else { 
     $(this).removeClass('active'); 
    } 
}); 

Answer 2

ここにはJavaScriptが必要ありません。最後の部分だけが赤の背景のグラデーションを設定し

：ここ

はCSS-唯一の方法です。次に、背景がテキストに収まるようにクリップします。

注：グラデーションのパーセンテージは、テキスト自体ではなく、入力フィールドの幅を基準にしています。したがって、テキストを変更する場合は、グラデーションのパーセント値も変更する必要があります。

input { 
 
    padding: 10px; 
 
} 
 
::-webkit-input-placeholder { 
 
    background: -webkit-linear-gradient(left, #AAA 0%, #AAA 46%,red 46%, red 100%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<input type="text" class="f_name" name="fname" placeholder="First Name*">