cup_of cup_of - 1 year ago 82
CSS Question

Increase size of html special characters (·) in an input placeholder

I have a bit of an odd request. I am creating a from on wordpress using the plugin Gravity Forms. I would like to add a bullet point to the end of my placeholder. The only way I was able to do this is to put the special html character

in the placeholder field on the plugin which is a middle dot. It works, but the dot is pretty small and I would like to increase its size.

Here is what the plugin placeholder field looks like

enter image description here

I tried to wrap the special character with a span with a class so I can edit it in css, but when I click save the plugin automatically removes the span tags.

Here is a screenshot on what the plugin spits out on the site.

enter image description here

I would like to make that dot much larger.

Here is the HTML that the plugin spits out:

<input name="input_1" id="input_1_1" type="text" value="" class="medium" placeholder="Name ยท">

Does anyone have any suggestions? Maybe some jQuery will work?


Answer Source

You can use the password dot (&#9679;) or bullet (&#8226;) instead. See the following comparison:

<input type="text" placeholder="middledot &#183;"/>
<input type="text" placeholder="bullet &#8226;"/>
<input type="text" placeholder="password dot &#9679;"/>