cinque8 0 Report post Posted November 6, 2017 Hello, . I have tried to round the corners of my submit button using the CSS border-radius property but I haven't had any success. . I have placed several variations into the head section of my document but nothing works. Can anyone please tell me what I am doing wrong here? . Thank you . <head> <style type="text/css"> div.af-clear { border-radius: 20px; } </style> </head> <head> <style type="text/css"> div#af-clear { border-radius: 20px; } </style> </head> <head> <style> div.af-clear { border-radius: 20px; } </style> <form accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" class="af-form-wrapper" method="post" target="_blank"> <div pbzloc="39" style="display: none"><input name="meta_web_form_id" type="hidden" value="1991411101" /> <input name="meta_split_id" type="hidden" /> <input name="listname" type="hidden" value="awlist4806168" /> <input id="redirect_41e503e55e268d841032ed3217e9f27e" name="redirect" type="hidden" value="http://launchpointforgrowingtaller.info/thankyou.html" /> <input name="meta_adtracking" type="hidden" value="Grow_Taller_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" /></div> <div class="af-form" id="af-form-1991411101"> <div class="af-header" id="af-header-1991411101"> <div class="bodyText"> <p pbzloc="17"> <span style="font-size: 26px"><strong><span pbzloc="16" style="color: #ff0000"><label class="previewLabel" for="awf_field-93026630">First Name: </label></span></strong></span></p> </div> </div> <div class="af-body af-standards" id="af-body-1991411101"> <div class="af-element"> <div class="af-textWrap" pbzloc="15" style="text-align: center"><input class="text" id="awf_field-93026630" name="name" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" pbzloc="32" size="16" style="height: 34px; width: 254px" tabindex="500" type="text" /></div> <div class="af-clear" style="text-align: center"></div> </div> <div class="af-element"> <p style="text-align: center"><span style="font-size: 26px"><strong><span pbzloc="18" style="color: #ff0000"> <label class="previewLabel" for="awf_field-93026631" pbzloc="43">Email: </label></span></strong></span></p> <div class="af-textWrap" pbzloc="42" style="text-align: center"><input class="text" id="awf_field-93026631" name="email" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" pbzloc="33" style="height: 35px; width: 254px" tabindex="501" type="text" /></div> <div class="af-clear" pbzloc="12" style="text-align: center"> </div> </div> <div class="af-element buttonContainer"> <div class="af-clear" pbzloc="19" style="text-align: center"> <span style="color: #ff0000"><input class="submit" name="submit" pbzloc="50" size="1" style="font-size: 1.2em; height: 51px; width: 143px; color: white; background-color: #ff0000" tabindex="502" type="submit" value="Submit" /></span></div> </div> <div class="af-element privacyPolicy" style="text-align: center"> <p> We respect your <a href="https://www.aweber.com/permission.htm" rel="nofollow" target="_blank" title="Privacy Policy">email privacy</a></p> <div class="af-clear" pbzloc="51"></div> </div> </div> <div class="af-footer" id="af-footer-1991411101"> <div class="bodyText"></div> </div> </div> <div style="display: none"><img alt="" src="https://forms.aweber.com/form/displays.htm?id=jJycjCyMjIwMjA==" /></div> </form> </head> <head> <style> div#af-clear { border-radius: 20px; } </style> </head> Quote Share this post Link to post Share on other sites
Ingolme 1,008 Report post Posted November 6, 2017 .submit { border-radius: 20px; } Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 6, 2017 Ingolme, THANK YOU ! THANK YOU ! THANK YOU ! I have been all over the Internet searching for answers to this. And you would really be surprised at some of the responses that I got from so-call experts! Thanks again !!! Quote Share this post Link to post Share on other sites
codeminer 0 Report post Posted November 6, 2017 this works two input[type=submit] { border-radius: 5px; border: 0; width: 80px; height:25px;... } Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 6, 2017 And if you look at the HTML code above something called pbzloc keeps appearing. What the heck is that? pbzloc Quote Share this post Link to post Share on other sites
Ingolme 1,008 Report post Posted November 6, 2017 It looks like something that's being generated by the software that's building your page. You should learn more about CSS selectors. The issue you had was simply not applying the style to the correct element. Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 7, 2017 Will do. I used PageBreeze HTML editor to build my page, and it looks like pbzloc is some sort of formatting tool that PageBreeze uses. Thanks! Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 7, 2017 Ingolme, I went back over the code and I still do not see it. Could you please tell me how you selected the element "submit". Thanks! Quote Share this post Link to post Share on other sites
codeminer 0 Report post Posted November 7, 2017 (edited) <head> <style type="text/css"> div.af-clear { border-radius: 20px; } </style> </head> <head> <style type="text/css"> div#af-clear { border-radius: 20px; } /*______________________________________________________________________________ I tested this, it works! add the code below to your css */ ___________________________________________________________________________*/ input[type=submit] { border-radius: 20px; border: 0; width: 80px; height:25px;... } /*________________________________________________*/ </style> </head> <head> <style> div.af-clear { border-radius: 20px; } </style> <form accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" class="af-form-wrapper" method="post" target="_blank"> <div pbzloc="39" style="display: none"><input name="meta_web_form_id" type="hidden" value="1991411101" /> <input name="meta_split_id" type="hidden" /> <input name="listname" type="hidden" value="awlist4806168" /> <input id="redirect_41e503e55e268d841032ed3217e9f27e" name="redirect" type="hidden" value="http://launchpointforgrowingtaller.info/thankyou.html" /> <input name="meta_adtracking" type="hidden" value="Grow_Taller_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" /></div> <div class="af-form" id="af-form-1991411101"> <div class="af-header" id="af-header-1991411101"> <div class="bodyText"> <p pbzloc="17"> <span style="font-size: 26px"><strong><span pbzloc="16" style="color: #ff0000"><label class="previewLabel" for="awf_field-93026630">First Name: </label></span></strong></span></p> </div> </div> <div class="af-body af-standards" id="af-body-1991411101"> <div class="af-element"> <div class="af-textWrap" pbzloc="15" style="text-align: center"><input class="text" id="awf_field-93026630" name="name" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" pbzloc="32" size="16" style="height: 34px; width: 254px" tabindex="500" type="text" /></div> <div class="af-clear" style="text-align: center"></div> </div> <div class="af-element"> <p style="text-align: center"><span style="font-size: 26px"><strong><span pbzloc="18" style="color: #ff0000"> <label class="previewLabel" for="awf_field-93026631" pbzloc="43">Email: </label></span></strong></span></p> <div class="af-textWrap" pbzloc="42" style="text-align: center"><input class="text" id="awf_field-93026631" name="email" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" pbzloc="33" style="height: 35px; width: 254px" tabindex="501" type="text" /></div> <div class="af-clear" pbzloc="12" style="text-align: center"> </div> </div> <div class="af-element buttonContainer"> <div class="af-clear" pbzloc="19" style="text-align: center"> <span style="color: #ff0000"><input class="submit" name="submit" pbzloc="50" size="1" style="font-size: 1.2em; height: 51px; width: 143px; color: white; background-color: #ff0000" tabindex="502" type="submit" value="Submit" /></span></div> </div> <div class="af-element privacyPolicy" style="text-align: center"> <p> We respect your <a href="https://www.aweber.com/permission.htm" rel="nofollow" target="_blank" title="Privacy Policy">email privacy</a></p> <div class="af-clear" pbzloc="51"></div> </div> </div> <div class="af-footer" id="af-footer-1991411101"> <div class="bodyText"></div> </div> </div> <div style="display: none"><img alt="" src="https://forms.aweber.com/form/displays.htm?id=jJycjCyMjIwMjA==" /></div> </form> Edited November 7, 2017 by codeminer Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 7, 2017 Thanks Codeminer! Quote Share this post Link to post Share on other sites
codeminer 0 Report post Posted November 7, 2017 no problem, i hope you getter done! Quote Share this post Link to post Share on other sites
Ingolme 1,008 Report post Posted November 7, 2017 This is the button you are trying to give rounded corners to: <input class="submit" name="submit" pbzloc="50" size="1" style="font-size: 1.2em; height: 51px; width: 143px; color: white; background-color: #ff0000" tabindex="502" type="submit" value="Submit" /> It has "submit" as the value of the class attribute, therefore we use the class selector ".submit" to target the element. Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 7, 2017 Thank you Ingolme and Codeminer for the very helpful information. Apparently, there is more than one way to achieve this. I will definitely study this information. I posted this question on a few other sites and got a couple of very creepy responses. Thanks again! Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 12, 2017 (edited) Hello, and because of the help that I received in this forum I now have rounded corners on my Submit button. I do have another question. I have another website located at: http://bestfibroidhealthcare.info/ In my form at the bottom of the page, the First Name box, and the Best Email box are located on the far right of the form. Is there any way to move those 2 boxes to the center of the form? Thanks again. fibroids.html Edited November 12, 2017 by cinque8 Quote Share this post Link to post Share on other sites
Ingolme 1,008 Report post Posted November 12, 2017 The problem is that you give the inputs an "af-textWrap" class which sets its width to 70% and shifts it to the right. Quote Share this post Link to post Share on other sites
cinque8 0 Report post Posted November 14, 2017 Thank you for the information Quote Share this post Link to post Share on other sites
shaili_shah 0 Report post Posted November 22, 2019 you have to apply border-radius: .submit { border-radius: 25px; } Quote Share this post Link to post Share on other sites
Max Castril 0 Report post Posted December 12, 2019 I have been trying to change the size, font, colour etc. of the submit button as it is too insignificant in my page. I tried this in W3Schools Tryit Editor but doesn't work: <!DOCTYPE html> <html> <head> <style> .submit { border-radius: 10px; width: 60%; font-family: "Times New Roman", Times, serif; } </style> </head> <body> <form action="/action_page.php"> First name: <input type="text" name="fname" value="John"><br> Last name: <input type="text" name="lname" value="Doe"><br><br /><br /> <input type="submit" value="Submit form"> </form> </body> </html> in https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_value Any ideas? Quote Share this post Link to post Share on other sites
dsonesuk 896 Report post Posted December 12, 2019 '.' Means a class identifier, .submit means class with value of 'submit'. Since you have no class="submit" your styling for that clasd name won't be applied. Quote Share this post Link to post Share on other sites
Max Castril 0 Report post Posted December 14, 2019 Sorted it! Changed submit from <input type="submit"> to <input type="button" value="Click me" onclick="msg()"> https://www.w3schools.com/tags/att_input_type_button.asp https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button Works anyway but I still hate CSS😝. Quote Share this post Link to post Share on other sites
