Tips on styling Jquery reset form button

[jerkski]

I used the example from the FAQ’s to configure a reset form button. Here’s my code that resets the form and returns the focus to the first field in my quform:

<input type="rbutton" onclick="jQuery(this).parents('.iphorm').resetForm(); jQuery.uniform.update();
jQuery(document).ready(function ($) {$('.iphorm_3_29').focus();});return false;"><div class="cancel-text">RESET FORM</div></input>

I also added css to the custom.css file:

input[type=rbutton] {
float:left;
display: inline;
padding-top: 10px;
height: 30px;
background: #FF0000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease;
overflow: visible;
}

.cancel-text {
vertical-align: middle;
display: inline;
min-height: 20px;
float:left;
display: inline;
position: relative;
padding: 0 20px;
padding-top: 10px;
height: 25px;
text-transform: uppercase;
font: bold 20px/22px Arial, sans-serif;
color: #000;
text-shadow: 1px 1px 1px rgba(255,255,255, .22);
}

The problem is I am trying to style the button so that it matches my submit button at the bottom of the form. What I get though with the code above is a button with the text RESET FORM directly to the right of it. How can I set this text over the jquery button. Also, how can I move this button to the right of the submit button? Any advice or hints would be appreciated. I’m a bit of a newbie when it comes to jquery. So I am not sure how to apply styles to it, especially when they are being inherited already.

Do you have any plans on just adding a Reset button to the forms?

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts