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 2 of 2
  1. #1
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post

    How to add style to menu form

    Hello,

    I am designing a website and want to create a customized menu. How can I add more style to my form? It looks very plain.

    Code:
    <html>
    <head>
    </head>
    <body>
    <form name="form1" method="post">
    
    Select a page to visit: 
    
    <select name="dd1" size="1">
    <option value="http://address_for_page_1">Page # 1</option>
    <option value="http://address_for_page_2">Page # 2</option>
    <option value="http://address_for_page_3">Page # 3</option>
    </select>
    
    <input type="button" 
     onclick=
      "location = 
       document.form1.dd1.options
       [document.form1.dd1.selectedIndex].value;" 
     value="GO">
    
    </form>
    </body>
    </html>
    Any help is appreciated.
    Last edited by Taro; 02-26-2012 at 10:08 PM. Reason: forgot something
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    You can add almost any CSS to modify the look. e.g.:
    Code:
    <html>
    <head>
    <style>
    select {
    color:yellow;
    background-color:green;
    border:1px solid blue;
    }
    option {
    color:white;
    background-color:black;
    border:1px solid red;
    }
    option:first-letter {
    color:lime;
    font-size:120%;
    }
    </style>
    </head>
    <body>
    <form name="form1" method="post">
    
    Select a page to visit: 
    
    <select name="dd1" size="1">
    <option value="http://address_for_page_1">Page # 1</option>
    <option value="http://address_for_page_2">Page # 2</option>
    <option value="http://address_for_page_3">Page # 3</option>
    </select>
    
    <input type="button" 
     onclick=
      "location = 
       document.form1.dd1.options
       [document.form1.dd1.selectedIndex].value;" 
     value="GO">
    
    </form>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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