Line spacing inside a combo box

HTML & CSS
1

Hi to everybody,

I trying to solve a little problem …
I want to modify the line spacing (I need a bigger one) between the options of a select tag (combo box).
That is, I need more space between the different lines inside a combo box.

The reason is that the users of the my application have touchscreen displays and it’s hard for them to select an option clicking with (a big) finger.

Thank You very (very) much in Advance and Ciao
Fausto

2

Try this bit of CSS:


option {
  line-height: 200%;
}
3

Thanks…
but I’m using a separate CSS file (I’m not very expert), can I put the code you sent me in a different part of the html file?
For example inside the header, or somewhere in the body…

Thank you again
Fausto

4

I Tryed to put in the header:

<style type=“text/css”>
option
{
line-height: 200%;
}
</style>

but it doesn’t work…
Was it correct?

5

Without seeing the rest of your CSS and HTML sources it’s impossible to tell, but your addition may be overruled by an already present style declaration in the external CSS file. Your best bet would be to integrate the style provided by vgarcia into the CSS file, checking that it doesn’t conflict or gets overruled with any of the present styles.

6

Again without seeing your CSS - it’s near on impossible to say but try one of these:

<style type="text/css">
select option
{
line-height: 200%;
}
</style>

or add: class=“sizeable-opt” to the <select> menu in question like this:

<select class=“sizeable-opt”>

and then define a special rule for it:

<style type="text/css">
select.sizeable-opt option
{
line-height: 200%;
}
</style>

or even:

<style type="text/css">
select.sizeable-opt option
{
font-size: 95%;
}
</style>

These should make the text appear about the normal size, but wil increase/decrease when the text-size on the browser is changed.

HTH :slight_smile:
Russ

7

Hi to everybody,
thanks to all but It can’t work yet…

first of all the my pages don’t use any external (or embedded in the pages) CSS file, unless there are some default CSS setted in the browser (IE) or in the web server (Apache).
Anyway I tried this simple test html script:

<html>
<head>
<style type=“text/css”>

select.sizeable-opt option
{
line-height: 200%;
font-size: 14pt ;
}

</style>
</head>

<body>
<select size=“1” name=“Test” class=“sizeable-opt” >
<option> 1111 </option>
<option> 2222 </option>
<option> 3333 </option>
<option> 4444 </option>
</select>
</body>
</html>

The problem is that for each different value of line-height or font-size, nothing occur, therefore it doesn’t work.

Any solution?

Thank You very much again
Fausto

8

Try this - it just worked for me:

<style type="text/css">
select.sizeable-opt
{
 font-size:	95%;
}
</style>

Cheers.
Russ