Member Avatar for murali2489

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;

}
  • 9 Contributors
  • 18 Replies
  • 2K Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by Dani
Member Avatar for Jack_9

try putting af spacce between the colon and 3px

Member Avatar for diafol

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.

Member Avatar for murali2489

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 .

nospace.jpg 90.54 KB
Member Avatar for diafol

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.

Edited by diafol
Member Avatar for DJBirdi

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.

Edited by DJBirdi
Member Avatar for murali2489

Hi DjBirdi,

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

Please advise

Member Avatar for nadiam

as they said its an IE problem.

as said:

Search for an IE letter-spacing fix.

Member Avatar for diafol

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

Edited by diafol
Member Avatar for veera100

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;
Member Avatar for DJBirdi

@veera100

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

Member Avatar for murali2489

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

Member Avatar for Taywin

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

Edited by Taywin
Member Avatar for diafol

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

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.

Member Avatar for Taywin

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?

Edited by Taywin
Member Avatar for diafol

I tried a different font, no difference. :(

Member Avatar for mayter03

no way to apply letter-spacing on the list items, all?
I mean to apply letter-spacing to all menu items. not only the first item.

Member Avatar for Dani

You should definitely be able to apply letter spacing to list items. Can you show your CSS and what isn't working and I can try to help?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.