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
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Changing The Design Of My Websites Form...Help!

    Hello All,

    I'd like to change the way the text box and drop menu for my website's forms appear. Where do I begin? I can not find an option in the CSS file.
    Thanks for any help anyone can give me.


    TJ

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You want to change the colour, size?

    drop down menu? Do you mean a selection menu?

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Tempz,

    I'd like to round the edges of the text boxes and change the look of the drop menus to look a little more sleek. I can send a link to the site I am trying to make these changes to. Thanks a lot for you reply!

    TJ

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Okay..

    What is your website link?

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    To style form input elements, you can use:
    Code:
    //change the input type to whatever you need and style from there.
    input[type="text"]{
         background-color: #ff0000;
    }
    To create rounded border edges, you can use this code: (Which gratefully I received from CF)
    Code:
    -moz-border-radius-topright: 20px;
    border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
    Obviously just apply that CSS to which ever element you are styling and you should see rounded borders. You can increase or decrease the value to whatever you like but I'm sure there is a limit once it gets towards 80px+ (not 100% sure on that).

    Hope this helps you out.

    Kind regards,

    LC.
    Last edited by LearningCoder; 08-03-2012 at 10:37 AM. Reason: formatted code


  •  

    Posting Permissions

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