I can style the div the button sits in, but not the button itself. Ideally all I need is the button replaced by white text sitting in my styled div but I cannot get rid of the auto generated browser submit button - has anyone else styled one?
You have given the div and the button inside it the same HTML ID, which is a big no-no. Try naming the box submit_holder or something else like that. Then apply all of your style to the submit button itself, and none to the box. Let the box just hold the button in place in your layout. (And you may find that the box is completely unnecessary.)
Have a look at this fiddle (and realize, there is no JavaScript involved here, just CSS):
The outer box is there, but not styled in any way. You could ignore it unless you had some other driving reason for it to be there. The entire visual box area is created by the input itself, and so the entire thing is clickable. I added a hover effect to make it clear when it’s possible to click. This is also optional.
Walter
On Sep 11, 2013, at 2:38 AM, BigG wrote:
I can style the div the button sits in, but not the button itself. Ideally all I need is the button replaced by white text sitting in my styled div but I cannot get rid of the auto generated browser submit button - has anyone else styled one?
That’s because Perch is munging the ID of that field. Even though your code reads id=“submit”, the published HTML reads id=“form1_submit”. So you could simply change your CSS to match: #form1_submit replaces #submit.