How do I get an option in a listbox to wrap down to the next line?

I have a list of options in a listbox. The first option is rather long and I would like part of it to wrap down to the next line with a slight indention so that it does not look likeList box a separate option. How can I accomplish this? The code for the listbox is as follows:

<select name="class1-gusto" id="class1-gusto"> <option value = "">Theme 1</option>
                       <option value = "Grocery shopping education">Grocery shopping education: fresh food market and supermarket; organic and industrially produced foods; fresh and preserved foods</option>
                       <option value = "Cuisine as a cultural landmark">Cuisine as a cultural landmark: seasonality & DOP/IGP (quality control mark)</option>  
                       <option value = "Pizza and bread in the Italian Tradition">Pizza and bread in the Italian Tradition</option>
.
.
.
</select>
geeta_m9Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
F PCommented:
Use <optgroup> within your selectors, but it won't be able to be selected itself.


http://htmldog.com/reference/htmltags/optgroup/

<select name="catsndogs">
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>

Open in new window

0
 
F PCommented:
Other than that you need a hanging indent, which isn't available with select elements. You would have to recreate them on the fly using jquery and custom coloring/css styles do for all custom select elements. Here's what you might want to look into:

stackoverflow.com/questions/3481966/how-to-indent-text-in-a-select-drop-down-menu-using-css

<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>

Open in new window


CSS:
#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;
}

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
geeta_m9Author Commented:
Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.