CSS :after used to make arrow for links not working for submit button - css

Question

Ive used the CSS :after selector to create an arrow for my links. This works fine but now I want to do the same thing to form inputs.
If I use the same class on the submit button then the :after is ignored, im assuming because the element cant contain other other elements.
If I apply the class to a div containing the submit button then it looks fine, but the arrow and padding outside of the actual submit button isnt clickable.
Is there a solution to this?
http://jsfiddle.net/jn7Vj/5/
.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
.button-style input {
background: none;
border: none;
color: white;
font-size: 12px;
margin: 0;
padding: 0;
}
Here is a link
<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">
<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">
<input type="submit" class="button-style" value="Submit">
<div class="button-style">
<input type="submit" value="Submit">
</div>
</form>

Answer 1

The CSS after pseudo element doesn't work on input fields (https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work). Unfortunately your only solution here is to add the triangle as a background image on the input field or surround the field with something like a div or a span and add the after selector to that element.
As for your button, I would suggest changing it from an input element to a button, you can then apply the after selector to that.
EDIT
After reading your question again, I'm not sure if you want to add the triangle to your text input but here is a jsFiddle with the style added only to the buttons: http://jsfiddle.net/jn7Vj/9/

Answer 2

add for .button-style position:relative; padding: 0;
add for .button-style input padding: 0.7em 2em 0.7em 1em; --> you can change this sizes, main idea is move padding from .button-style to .button-style input
add next css-rules for .button-style:after
position:absolute;
top:50%;
right:10%;
margin: -0.2em 0 0 0;