Targeting a specific letter inside form field placeholder attribute

Question

I have form fields such as <input type="text" placeholder="Name*"> . Then I have CSS applied to the placeholder, so it's grey. However, I want to change the asterisk(*) to be red. How would I target just that one character inside the attribute with jQuery or Javascript?

Ritesh Karwa · Answer 1 · 2015-06-03T18:17:00.563

4

Here you go works for me

<!DOCTYPE html>

    <head>
      <meta charset="utf-8">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


      <style>
      input::-webkit-input-placeholder:after {
         content: '*'; color: red;
      }
      </style>
    </head>
    <body>
      <input type="text" placeholder="Name"></input>

    <script>

    </script>

    </body>
    </html>

edited Jun 03 '15 at 18:17

answered Jun 03 '15 at 18:13

Ritesh Karwa

2,196
1
13
17

Also see here http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Treesrule14 Jun 03 '15 at 18:15

score 3 · Answer 2 · answered Jun 03 '15 at 18:20

So CSS only has ::first-letter and not ::last-letter styling... To make ::first-letter apply to the last letter, you do a trick by changing the direction of the text like so:

::-webkit-input-placeholder {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
::-webkit-input-placeholder::first-letter { /* WebKit browsers */
    color: red;
}

The issue with this is that you'll need to reverse your placeholder attribute and you can't use an asterisk because that's considered punctionation. But you can use unicode characters :)...

<input type="text" placeholder="★ emaN">

Here's the JSFiddle: http://jsfiddle.net/988aejrg/1/

Targeting a specific letter inside form field placeholder attribute

2 Answers2