Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Ct
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help customizing an html form input button

    I need to know if its possible to customize an html form input button. I would like to be able to make the corners round. I can round off one side using a background image but am unable to round off the other side. Below is my css using an image to round off the left side. The image is approx 300 px wide to allow different lengths of text.

    Any suggestions would be greatly appreciated.

    Thanks!
    Stephen



    CSS:

    Code:
    input.btn {
    	cursor:hand;
    	color:#fff;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	padding:2px 4px 2px 4px;
    	background: transparent url('button_bg.gif') no-repeat;
    	border:none;
    	margin:0 0px 0 0px;
    	height:25px;
    	border-radius:20;
    }

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Location
    OKC, OK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You have to add some kind of units to your border-radius declaration, i.e., border-radius:20px;

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Ct
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Whoop...my bad...can't use the radius attribue

    Whoop...my bad. The radius was my attemp to see if it might work with IE 7and 8...it doesnt..that shouldn't have been there.

    I guess to be more clear, I cannot use the radius attribute because it will not be recognized by lower browsers.

    Any ideas?

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,742
    Thanks
    41
    Thanked 191 Times in 190 Posts
    I do not know if it would work or not... or if there would be issues... but you already said you are using your image for background... rotate it three times (save each time) and then set it as background 4 times with the correct position assingment in the background...
    eg
    Code:
    background:url('myimage1.jpg') top left;
    background:url('myimage2.jpg') top right;
    background:url('myimage3.jpg') bottom left;
    background:url('myimage4.jpg') bottom right;
    Again... I have no clue if that will work or not, but worth a try

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Ct
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    MMMM...Ill give it a try

    Interesting. Ill give it a try and see if it works. Ill post the results. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •