Jump to content

Trying to round the courners of my submit button


Recommended Posts

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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

<div class="af-element buttonContainer">
<div class="af-clear" pbzloc="19" style="text-align: center">&nbsp; <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>&nbsp;&nbsp;&nbsp; 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>

image.png

Link to post
Share on other sites

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 post
Share on other sites

<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

<div class="af-element buttonContainer">
<div class="af-clear" pbzloc="19" style="text-align: center">&nbsp; <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>&nbsp;&nbsp;&nbsp; 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 by codeminer
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 by cinque8
Link to post
Share on other sites
  • 2 years later...
  • 3 weeks later...

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...