Hi there,
I have the following animation that is working as I would like it to on a p tag, but if I change it to use the classes on an input or even just an input element, it doesn’t seem to work and I can’t figure out why.
Does anyone have any ideas why this is?
Thanks!
Hm, I’m not sure why either, but a workaround might be just to put the input inside the p, although you’d have to tweak the styles a bit to make it visible.
Thanks for the reply. I don’t really have access to the structure/HTML as it is a theme, so I am trying to modify it via it’s classes only.
The fiddle doesn’t seem to load for me?
Not sure is JSFiddle was down, but it seems to be loading now
Ok Its working now 
The problem is that you are applying the effect to the :before and after pseudo elements and inputs (like images) are replaced content and do not have before or after pseudo classes.
Therefore the effect you want is not really possible unless you do as Ralph suggests and wrap an element around the input.
The best I could come up with without changing the html would be this:
The corners can’t be rounded as its a border-slice image that won’t round.
Here’s another effort but only modern browsers.
Many thanks for the replies and example, they are great! I will have a play around and see how I get on