Enhanced country selection with Css and Javascript

July 23, 2006 • Css, Javascript, Tutorials by Emanuele Feronato • 12 Comments

How many times you had to choose your country in a form, with a old, simple popup?

Time to change the way you choose your country (or anything else) with a bit of Css and Javascript.

I am showing the example in a iframe not to mess with WordPress styles.

As you can see, when you move the mouse over the text input, a list with (almost) every world country and flag appears, and when you click on a country, its ISO code is displayed into the text input.
When you move the mouse out of the country list, it closes.

How can it be made?

Let’ see the content of the main page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{margin:0px;font-family:verdana;font-size:11px;background-color:#e5e5e5}
a{
	position:relative;
	z-index:24;
}
a:hover{
	z-index: 25; 
	background-color: #ff0}
a span{
	display: none
}
a:hover span{
	display: block;
	position:absolute;
    top: 10px;
    left: 20px;
    width: 200px;
    border: 1px solid #000000;
}
 
input{
	width:30px;
	font-family:verdana
}
 
</style>
</head>
<body>
	<form id="countrysel" method="get" name="countrysel">
		Select country: <a href="javascript:void(0)"><input type="text" name="country" readonly><span><iframe src="index.html" frameborder="0" scrolling="yes" height="150" width="220"></iframe></span></a>
	</form>
	other content here other content here other content here
</body>
</html>

The trick is in the <a> and <span> css use, with a display attribute changing on hover status.

It’s easiest to see than to explain.

Let’s look at line 34, when I call the iframe I simply load an ordered list with a javascript to communicate with the “parent” page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
body{margin:0px;background-color: #000000}
ul{margin:0px;padding:0px;margin-left: 1px;padding-left: 0;list-style-type: none;font-family: verdana;font-size:11px;text-transform: capitalize;}
img{ vertical-align: middle}
a{display: block;width: 200px;background-color: #f5f5f5;padding:4px;}
a:link, a:visited{color: #000000;text-decoration: none;}
a:hover{background-color: #ffaf2e;color: #000000;font-weight:bold;}
</style>
</head>
<body>
<ul>
<li><a href = "javascript:void(0)" onclick = "parent.document.countrysel.country.value = 'af'"><img src="af.gif" alt="" width="16" height="11" border="0" /> afghanistan</a>
<li><a href = "javascript:void(0)" onclick = "parent.document.countrysel.country.value = 'ax'"><img src="ax.gif" alt="" width="16" height="11" border="0" /> &aring;land islands</a>
<li><a href = "javascript:void(0)" onclick = "parent.document.countrysel.country.value = 'al'"><img src="al.gif" alt="" width="16" height="11" border="0" /> albania</a>
...
...

Look how I set the menu starting with an unordered list with Css (lines 5-10) and how I pass ISO values to the parent page (line 15 for example).

You can download the whole work here, check 2 html files and give me feedback or suggestion about the use of this feature.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4.10 out of 5)
Loading ... Loading ...
Template Monster offers you a great assortment of CSS Templates.
They can be a great start to launch a website of your own and meet the individual needs of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 12 comments

  1. Spiketmr

    on August 1, 2006 at 9:01 pm

    Great script. Thanks alot.

  2. Ajay

    on August 18, 2006 at 10:39 pm

    Gr8 work…Can i use it..in my commercial website..without much modification in the code.

  3. Emanuele Feronato

    on August 18, 2006 at 11:03 pm

    Of course… and do not forgeto to show me the final result

  4. metz

    on September 26, 2006 at 7:34 pm

    Bugs like a hillbilly in Opera.

  5. saeed

    on January 1, 2007 at 1:51 pm

    its very intersted

  6. Kerim Incedayi

    on January 2, 2007 at 11:55 pm

    doesnt work with IE7… but IE7 doesnt work much anyways so no worries.. lol :P

  7. Thomas

    on September 19, 2007 at 6:22 am

    it does work in ie7, but ie7 that you used was probably beta…

    amazing! there’s great need for this in almost every website! thanks!

  8. Thomas

    on September 19, 2007 at 6:25 am

    oh … i see what you mean, kerim. when i downloaded it and view it won’t work! sorry about that!

  9. Ste

    on October 13, 2007 at 4:22 am

    Dont work in firefox!!!

  10. Beenish

    on October 30, 2007 at 10:28 am

    Please provide me the source code for this.
    I have a big list of values, which i want
    to display like this.
    Thanks,
    Ben

  11. Kevin

    on November 22, 2007 at 8:36 pm

    Can you add a state/territory and zip code. Thank you

  12. manbros

    on November 11, 2008 at 7:05 am

    Looking for javascript Pakistan cities like world countries.

< >