how to increase letter spacing of words in select tag

Question

murali2489 0 Junior Poster

9 Years Ago

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;

}

css letter spacing web-design

9 Contributors
18 Replies
2K Views
6 Years Discussion Span
Latest Post 3 Years Ago Latest Post by Dani

Recommended Answers

Answered by diafol 3,720 in a post from 9 Years Ago

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

Jump to Post

Answered by diafol 3,720 in a post from 9 Years Ago

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 …

Jump to Post

Answered by DJBirdi 54 in a post from 9 Years Ago

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 …

Jump to Post

Answered by nadiam 0 in a post from 9 Years Ago

as they said its an IE problem.

as said:

Search for an IE letter-spacing fix.

Jump to Post

Answered by diafol 3,720 in a post from 9 Years Ago

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 …

Jump to Post

All 18 Replies

diafol

9 Years Ago

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.

diafol

9 Years Ago

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 9 Years Ago by diafol

DJBirdi 54 Junior Poster

9 Years Ago

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 9 Years Ago by DJBirdi

nadiam 0 Posting Pro in Training

9 Years Ago

as they said its an IE problem.

as said:

Search for an IE letter-spacing fix.

diafol

9 Years Ago

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 9 Years Ago by diafol

Reply to this topic

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.

Jack_9 -4 Junior Poster · Answer 1 · 2014-07-11T07:35:19+00:00

try putting af spacce between the colon and 3px

murali2489 0 Junior Poster · Answer 2 · 2014-07-11T09:26:35+00:00

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 .

murali2489 0 Junior Poster · Answer 3 · 2014-07-14T07:30:56+00:00

Hi DjBirdi,

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

Please advise

veera100 0 Newbie Poster · Answer 4 · 2014-07-15T11:21:04+00:00

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;

DJBirdi 54 Junior Poster · Answer 5 · 2014-07-15T18:41:25+00:00

@veera100

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

murali2489 0 Junior Poster · Answer 6 · 2014-07-16T08:30:57+00:00

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

Taywin 312 Posting Virtuoso · Answer 7 · 2014-07-16T15:14:25+00:00

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

diafol · Answer 8 · 2014-07-16T15:28:19+00:00

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.

diafol · Answer 9 · 2014-07-16T15:36:02+00:00

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.

Taywin 312 Posting Virtuoso · Answer 10 · 2014-07-16T17:47:28+00:00

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?

diafol · Answer 11 · 2014-07-16T22:15:18+00:00

I tried a different font, no difference. :(

mayter03 0 Newbie Poster · Answer 12 · 2021-01-29T01:10:15+00:00

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.

Dani 4,084 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 13 · 2021-01-29T01:15:06+00:00

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?

how to increase letter spacing of words in select tag

Recommended Answers Collapse Answers

All 18 Replies

Recommended Answers