Menu
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?
826
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>
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/
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
