SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    vertical space between options

    Code:
    <select name="country">
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Italy</option>
    <option value="4">Korea</option>
    <option value="5">China</option>
    <option value="6">Japan</option>
    </select>
    I like to put a vertical space between Italy and Korea.

    The code below can make a vertical space between Italy and Korea, but it goes to next page when a user clicks the submit button.
    Code:
    <select name="country">
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Italy</option>
    <option value="3">Italy</option>
    <option valu"0">vertical space</option>
    <option value="4">Korea</option>
    <option value="5">China</option>
    <option value="6">Japan</option>
    </select>
    I like to make a vertical space visually and it doesn't go anywhere when a user selects (4) option and clicks the submit button.

  2. #2
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would add client-side code to disable the submit button when that option is selected and to enable the submit button when any other option is selected. However, you should also back that up with server side validation to be sure that people browsing without JS don't slip through the cracks.

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't think of a way to style a space between options. As a last resort you can always create your own customised "select" by using <ul>. You can easily add space between the <li>'s using css margin.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dotJoon View Post
    Code:
    <select name="country">
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Italy</option>
    <option value="4">Korea</option>
    <option value="5">China</option>
    <option value="6">Japan</option>
    </select>
    I like to put a vertical space between Italy and Korea.
    What you are looking for is the <optgroup> tag.

    Code:
    <select name="country">
    <optgroup label="Europe">
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Italy</option>
    </optgroup><optgroup label="Asia">
    <option value="4">Korea</option>
    <option value="5">China</option>
    <option value="6">Japan</option>
    </optgroup>
    </select>
    The labels will be displayed in the select list but can not be selected.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only problem with <optgroup> for the op's requirements is that it has a fixed space between the groups. I doubt you can use css styles to change the space if you wanted a larger or smaller space than the default.


Bookmarks

Posting Permissions

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