Red Asterisk directly beside placeholder in input box
Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:
First, add a class named "required" or some such to the input box itself. Then, add the following tags:
.required::-webkit-input-placeholder:after {
content: " *";
color: red;
}
.required:-moz-placeholder:after {
content: " *";
color: red;
}
.required:-ms-input-placeholder:after {
content: " *";
color: red;
}
kmcf89
Updated on July 18, 2022Comments
-
kmcf89 almost 2 years
I've done a bunch of googling, but I can't find an answer anywhere that works for me.
I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:
form { margin: 0 auto; background-color: #3d549a; } input { font-family: avenir; font-size: 17px; color: #ffffff; font-weight: 100; border: none; width: 400px; padding: 15px; border-radius: 5px; } textarea { height: 5em; resize: vertical; font-family: avenir; font-size: 17px; color: #ffffff; font-weight: 100; border: none; width: 860px; padding: 15px; border-radius: 5px; } .asterisk_input:after { content: " *"; color: #e32; position: absolute; margin: 0px 0px 0px -20px; font-size: 17px; padding: 0 5px 0 0; } .buttonblue { padding-left: 90px; background-color: #31b9e9; font-family: avenir; font-size: 16px; width: 300px; height: 75px; color: #ffffff; padding: 0; border: none; border-radius: 5px; box-shadow: 0px 5px 1px #21a1c6; } button { margin-left: .5em; }
<table width="100%" style="background-color: #3d549a" height="820px"> <tr height="250"> <td valign="bottom" align="center" width="100%" colspan="4"> <span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/> <hr color="#273a72" width="75" align="centre"> <span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span> </td> </tr> <tr> <td> <form action="/my-handling-form-page" method="post"> <p> <input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" /> <span class="asterisk_input"> </span> <input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" /> <span class="asterisk_input"> </span> </p> <p> <textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea> <span class="asterisk_input"> </span> </p> <p> <button class="buttonblue" type="submit">SEND MESSAGE</button> </p> </form> </td> </tr> </table>
(I'm also having trouble centreing it ;) But one problem at a time, I suppose