Menu
My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three levels deep).
I want to display the list inside a select list, each item type (Country, State, City) must be selectable. The items should appear indented as:
United States - Hawaii -- Kauai - Washington -- Seattle -- Chelan The problem is with the indentation. I am trying to use either margin-left or padding-left to indent the tags, which appear correct in FireFox but not in IE7. This is an example of the generated select list:
<select name="Something"> <option style="padding-left: 0">United States</option> <option style="padding-left: 20px">Hawaii</option> <option style="padding-left: 40px">Kauai</option> <option style="padding-left: 20px">Washington</option> <option style="padding-left: 40px">Seattle</option> <option style="padding-left: 40px">Chelan</option> </select> I want to achieve consistent indentation across browsers without using CSS hacks.
441
You can use inline styles to add custome styling to <option> tags. For eg : <option style="font-weight:bold;color:#09C;">Option 1</option> This will apply the styles to this particular <option> element only. You can also use <option value="" disabled> <br> </option> to add a line-break between the options.
The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once.
Definition and Usage. The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input.
The rendering of SELECT elements is largely up to the browser, you have very little influence over their presentation. Some browsers obviously allow you more customization than others, IE happens to allow very little (gasp, who'd have thunk ;)). If you need very custom SELECT elements, you'll need to employ JavaScript or re-create something that behaves like a SELECT but is made of a bunch of DIVs and checkboxes or something to that extend.
Having said that, I think what you're looking for are OPTGROUPs:
<select> <optgroup label="xxx"> <option value="xxxx">xxxx</option> .... </optgroup> <optgroup label="yyy"> ... </optgroup> </select> Every browser will display them differently, but they'll be displayed in a distinctive fashion in one way or another. Note though that officially in HTML4 you can't nest OPTGROUPs.
167
deceze way is much better and was my first idea. As an alternative if that doesn't work is that you can use non-breaking spaces in the tag value:
<select> <option>select me</option> <option> me indented</option> <option> even more indentation</option> </select> It's far from pretty but it might work for you if the optgroup doesn't.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
