cinque8 Posted November 6, 2017 Share 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> Link to comment Share on other sites More sharing options...
Ingolme Posted November 6, 2017 Share Posted November 6, 2017 .submit { border-radius: 20px; } Link to comment Share on other sites More sharing options...
cinque8 Posted November 6, 2017 Author Share 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 !!! Link to comment Share on other sites More sharing options...
codeminer Posted November 6, 2017 Share Posted November 6, 2017 this works two input[type=submit] { border-radius: 5px; border: 0; width: 80px; height:25px;... } Link to comment Share on other sites More sharing options...
cinque8 Posted November 6, 2017 Author Share Posted November 6, 2017 And if you look at the HTML code above something called pbzloc keeps appearing. What the heck is that? pbzloc Link to comment Share on other sites More sharing options...
Ingolme Posted November 6, 2017 Share 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. Link to comment Share on other sites More sharing options...
cinque8 Posted November 7, 2017 Author Share 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! Link to comment Share on other sites More sharing options...
cinque8 Posted November 7, 2017 Author Share 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! Link to comment Share on other sites More sharing options...
codeminer Posted November 7, 2017 Share 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 Link to comment Share on other sites More sharing options...
cinque8 Posted November 7, 2017 Author Share Posted November 7, 2017 Thanks Codeminer! Link to comment Share on other sites More sharing options...
codeminer Posted November 7, 2017 Share Posted November 7, 2017 no problem, i hope you getter done! Link to comment Share on other sites More sharing options...
Ingolme Posted November 7, 2017 Share 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. Link to comment Share on other sites More sharing options...
cinque8 Posted November 7, 2017 Author Share 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! Link to comment Share on other sites More sharing options...
cinque8 Posted November 12, 2017 Author Share 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 Link to comment Share on other sites More sharing options...
Ingolme Posted November 12, 2017 Share 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. Link to comment Share on other sites More sharing options...
cinque8 Posted November 14, 2017 Author Share Posted November 14, 2017 Thank you for the information Link to comment Share on other sites More sharing options...
shaili_shah Posted November 22, 2019 Share Posted November 22, 2019 you have to apply border-radius: .submit { border-radius: 25px; } Link to comment Share on other sites More sharing options...
Max Castril Posted December 12, 2019 Share 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 12, 2019 Share 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. Link to comment Share on other sites More sharing options...
Max Castril Posted December 14, 2019 Share 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😝. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now