How to indent text in a select drop down menu using CSS


Tags: css,xhtml

Problem :

How can I indent categories and endless sub categories that I have in a select drop down menu using CSS?

   1. Apple
   2. Arts & Entertainment
         1. Amusement
         2. Art
         3. Artists
               1. A
                     1. a1
                     2. a2
               2. B
               3. C
               4. D
   3. Automotive
   4. Network
   5. Server
   6. Web Design
         1. CSS
         2. HTML


Solution :

You can't do this with the <select> element. You can't have endless nested subcategory like you suggest, only one, with <optgroup>. Styling will also be difficult as the ability to style form elements differs from browser to browser.

However, depending on your needs, the following solution might work:

For this, we are recreating the select element using HTML lists. The markup would look like this:

<div id="select">
    <p>Select your Answer</p>
    <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Arts and Entertainment</a>
            <ul>
                <li><a href="#">Amusement</a></li>
                <li><a href="#">Art</a></li>
                <li><a href="#">Artist</a>
                    <ul>
                        <li><a href="#">A</a></li>
                        <li><a href="#">B</a></li>
                    </ul></li>
            </ul>
        </li>
    </ul>
</div>

Then, with CSS, style it such that it fits your purpose:

#select {
    border: 1px solid #999;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 300px;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

#select:hover {
    background-color: #efefef;
}

#select > ul {
    display: none;
    list-style: none;
}

#select:hover > ul {
    display: block;
}

#select > ul ul {
    margin-left: 20px;
}

#select > ul a, #select > p {
    display: block;
    padding: 3px 8px 4px;
    color: #333;
    text-decoration: none;
}

#select > ul a:hover {
    background-color: #ddd;
}

Play around with it here: http://jsfiddle.net/thHFS/


    CSS Howto..

    How do I prevent child affected for transform scale in css3?

    How to find the highest z-index using jQuery

    How to stretch segment of image in html/css

    How can I center this textbox using CSS?

    How to fit a button to a hover box? And the button is not displaying properly?

    How to create a progress dialog when switching the webpages?

    How to achieve multi column layout with inline images

    How to make hyperlink for a background image?

    PNG background image not showing in IE 8< using html5?

    How to set a box on bottom of a box?

    How to make a automatic image slider.?

    How to Test CSS/HTML/jQuery?

    CSS Position Help (horizontal sidebar showing up when animate content over)

    How to get UiBinder Styles to Act The Same as From a .css File?

    Bootstrap dropdown div not showing in non-collapsed view

    How do I add a logo into the nav bar in CSS?

    how to add class with animation?

    How to disable CSS editor in Netbeans 7

    How to apply CSS only to numbers in paragraph? (without )

    How to style CSS for input box's width as a percentage when it has border and padding?

    How to implement small text list search functionality using CSS attribute selectors

    How can I overlay a canvas over a paragraph so that its title is shown when hovering over its entirety?

    How to place several elements in one row when using a list?

    How to get a small div bar to slide down a menu on mouseover

    How to change column display order mobile/tablet view CSS Wordpress?

    How to recreate eBay New Logo Page in HTML + CSS

    how to fix height:auto css

    How to prevent Ajax overflow/server crash? (Arduino/ESP8266 Environment)

    CSS & Button: How to override native CSS of html buttons element?

    How to execute select() method on polymer elements based on URL?