Search code examples
htmlcsswordpressgravity-forms-plugininput-field

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

I have a bit of an odd request. I'm creating a form 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?

Thanks

Solution

  • You can use the password dot (&#9679;) or bullet (&#8226;) instead.

    See the following comparison / examples:

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