Hi Team,

I would like to increase the space between letters inside select tag. I am not sure how to achieve this.
what i would like to get is like below

** letter >> l e t t e r **

** Below is my html and external CSS code . **

Please advise what im missing to achieve the result.

HTML code

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="mystyle8.css">



</HEAD>
<body>

<form>

<select>
    <option value="apple"Saab</option>
  <option value="orange">Mercedes</option>
  <option value="mango">Audi</option>
</select> 


</form>

</body>
</html>

** mystyle8.css **

select {
  font-family: Cursive;
  letter-spacing:3px;

}

try putting af spacce between the colon and 3px

Member Avatar

Your problem may be the html - place a close '>' after "apple"

But anyway, this works for me:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
select {
  font-family: Cursive;
  letter-spacing:10px;
}
</style>
</head>

<body>
<select>
    <option value="apple">Saab</option>
    <option value="orange">Mercedes</option>
    <option value="mango">Audi</option>
</select> 
</body>
</html>

I believe a space between colon and value in css is optional.

Hi Diafol,

I have used ur code in ie 11 and ie 8 also. I do not see any space between the letters

In the drop down box it is displaying as saab only not like s a a b.

attaching the screen shot

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
select {
 font-family: Cursive;
letter-spacing:10px;
}</style>
</head>
<body>
<select>
<option value="apple">Saab</option>
<option value="orange">Mercedes</option>
<option value="mango">Audi</option>
</select>
</body>
</html>

Please advise what is happening .

Member Avatar

Ah OK. It's a problem specific to IE. Works fine on FF, Chrome and Opera. Trust IE to mess up another CSS prop. Sooner it dies a death the better. Sorry starting to rant. Search for an IE letter-spacing fix.

I've read reports that it should work on IE10, but it fails for me on IE11 (Win7). God knows why, it's IE that's all I know.

Trust IE to mess up another CSS prop. Sooner it dies a death the better.

lmao ... Amen brother!

Try this:

<style>
    select {
        font-family: Cursive;
        letter-spacing:10px;

    }

    * html select {
        letter-spacing:10px;
    }
</style>

Also, a generally accepted practice is not to force a font size on the user. Try using "em" values instead of pixels so they're scalable.

Hi DjBirdi,

I have tried your above code also, it does not work in IE11.

Please advise

as they said its an IE problem.

as said:

Search for an IE letter-spacing fix.

Member Avatar

On further investigation, it works in IE when used on <h1> and <h2> tags, just seems reluctant with the <select> element. Hmmm.

//EDIT

How very odd. This now seems to work...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
select {
  font-family: Cursive;
  letter-spacing:10px;
}
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

<select>
    <option value="apple">Saab</option>
  <option value="orange">Mercedes</option>
  <option value="mango">Audi</option>
</select> 
</body>
</html>

Reference
Additional markup from W3Schools: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing

In select tag letter spacing of style code as given below:

    select {
    font-family: Cursive;
    letter-spacing:3px;
    }

If you want you letter-spacing style as

letter-spacing: normal|length|initial|inherit;

@veera100

Please read the complete thread next time. The user has already tried what you said.

Hi Diafol,

How very odd. This now seems to work...

did you mean your above code renders drop down menu with letter spacing applied ?

I tried it didnt work for me.

I tried for IE letter-spacing fix also in google but no luck

@murali, have you tried hard-refresh your page? Sometimes, browsers cache the CSS and will not apply new changes from the CSS. Hard refresh (Shift+F5) would force them to rerender again.

Member Avatar

Hmm, how odd. I never use IE, so it was not a cache issue for me - the first page view was the one with the letter-spacing code. So I'm at a loss.

Member Avatar

Well, doesn't work now again. Not caching issue - tested it. Sorry murali, I don't seem to be able to help you with this.

This blog talks about IE11 issue with display words/letters (but more on a page rendered by a server). That said, it gave me an idea. Could it be that 'Cursive' font family is not totally valid in IE11 display? Could you change/add a common family (i.e. Serif) to your CSS?

Member Avatar

I tried a different font, no difference. :(