Geek Answers Handbook

JQuery - Orientation to a specific letter inside the form field placeholder attribute

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

+5
source share
2 answers

Here you work 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>
+4
source

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

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

The problem is that you will need to cancel your placeholder attribute, and you cannot use an asterisk because this is considered a punctionation. But you can use Unicode characters :)) ...

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

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

+3
source

More articles:


All Articles