In the members-only forum a user wrote
I’d like to add a right pointing triangle to appear directly to the right of the email input field. This can normally be done using ::after with CSS or a background image, but that doesn’t work on input fields.
Is there a way to wrap input[type="email"] in a span so that the CSS can be applied? If that’s not possible, how can the triangle be added with Javascript?
Since it is not possible to add :before and :after pseudo selectors to input elements, we can use jQuery to wrap the email input field with a div having a class of say, triangle and use CSS border property to display a right pointing arrow.
In this example we shall enable After Entry widget area, drag a Genesis eNews Extended widget into it and load our custom .js file on single Posts.
At smaller widths we shall change the right triangle into a downward one.
Step 1
Install and activate Genesis eNews Extended plugin.
Step 2
Create a file named say, singular-posts.js in child theme's js directory (create if not existing) having the following:
