Solved

How can I create css style like this combo box style?

Posted on 2010-08-15
17
699 Views
Last Modified: 2012-05-10
I need to create exactly like the attached drop down list box using CSS. How can I do it? Thanks
image002.png
0
Comment
Question by:Loganathan Natarajan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 4
  • +1
17 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 33443282
<form>
<select>
      <option>United States</option>
                              </select>
</form>
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 33443289
U can add other options by adding more <option> tag like this
<form>
<select>
      <option>United States</option>
      <option>India</option>
      <option>Canada</option>
                             </select>
</form>
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 33443293
@qwerty

thanks, I am more on the css desigin ..how to have a nice stylish like that?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:qwerty021600
ID: 33443298
Do u want to create the whole combo box using CSS ?
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 33443320
Not like that, I need to apply CSS... i mean mix of HTML + CSS
0
 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 116 total points
ID: 33443426
0
 
LVL 5

Accepted Solution

by:
eNarc earned 267 total points
ID: 33443437
<style>
#button_create {      
      background: #89D289;* url(http://www.google.com/intl/en_ALL/images/srpr/logo1w.png) center repeat-x;
      color: #FFFFFF;
      text-transform: uppercase;
      font-size: 80%;
      *font-size: 90%;
      *font-size: 100%;
      font-weight: bold;
      padding: 1px 3px 1px 3px;
      margin: 0px 0px 0px 0px;
      *padding: 0px 3px 0px 3px;
      *margin: 0px 0px 1px 0px;
      border: 1px solid #B2B2B2;
      -moz-border-radius: 6px;
      cursor: pointer;
      *cursor: url(http://maps.google.com/intl/en_ALL/mapfiles/openhand.cur), default;
}
</style>




<select name="button_create" id="button_create">
  <option value="Yes">Best Thing in Life are Free</option>
</select>
0
 
LVL 5

Assisted Solution

by:eNarc
eNarc earned 267 total points
ID: 33443453
0
 
LVL 5

Expert Comment

by:eNarc
ID: 33443468
0
 
LVL 5

Expert Comment

by:eNarc
ID: 33443530
This may be what your looking for.
<table cellspacing="0" cellpadding="0" style="font-size:10pt;width:150px">
		<style>
		body{ 
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:8px;
		}
		#menu_lang {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#menu_lang img {
			margin-right:5px;
			width:27px;
			height:17px;
			vertical-align:middle;
		}
		#menu_lang a {
			text-decoration: none;
			width:115px;
		}
		#menu_lang a:hover {
			background-color:#DDDDDD;
		}
 
		</style>
		<tr OnMouseOver="this.style.cursor='hand';" OnClick="var elem = document.getElementById('menu_lang'); if (elem.style.display=='') elem.style.display='none'; else elem.style.display='';">
			<td width=128 style="padding-left:5px; padding-right:5px; border:1px solid #CCCCCC;">Choose language</td>
			<td witdth=18><img src="image002.png"></td>
		</tr>
		<tr>
			<td colspan="2" OnClick='document.getElementById('menu_lang').style.display='none';">
				<ul id="menu_lang" style=display:none;border:1px solid #CCCCCC;padding:0px">
				<li><img src="flag.png" /><a href="#1">English</a></li>
				<li><img src="flag.png" /><a href="#2">Français</a></li>
				<li><img src="flag.png" /><a href="#3">Deutsch</a></li>
				<li><img src="flag.png" /><a href="#4">Português</a></li>
				<li><img src="flag.png" /><a href="#5">Español</a></li>
				</ul>
			</td>
		</tr>
	</table>

Open in new window

flag.png
image002.png
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 33443554
@ eNarc..

good, i like this, <select name="button_create" id="button_create">
  <option value="Yes">Best Thing in Life are Free</option>
</select>

i am working on this example.. thanks
0
 
LVL 5

Expert Comment

by:eNarc
ID: 33443954
your welcome logudotcom, anytime.
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 33443962
sorry, my question is how to apply nice css styles to have combo like attached .jpg's.  still i am working with<select name="button_create" id="button_create">
  <option value="Yes">Best Thing in Life are Free</option>
</select>
...

not to create combo's dynamically
0
 
LVL 5

Expert Comment

by:eNarc
ID: 33444065
where did you actually get that screenshot of the drop down box? whats the website? would u provide the link to it?
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 33444088
it has been provided by my client? it might be FLASH.. i doubt. i will ask him
0
 
LVL 4

Assisted Solution

by:Morrisproject
Morrisproject earned 117 total points
ID: 33444349
HTML ::
<form id="someform">
<ul>
<li><select id="options">
      <option>The best things in life are free ;P</option>
</select>
</li>
</ul>
</form>

CSS:
form#someform ul {background:#000; list-style:none;margin:0;padding:0;}
form#someform ul li {list-style:none;background:#FFF;}
form#someform ul li #options {margin-left:10px;}

Should be able to play with the above. Changing the backgrounds to the desired images.
0
 
LVL 36

Author Closing Comment

by:Loganathan Natarajan
ID: 33452059
thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Send email using HTML and PHP in separate file 5 60
asp.net, radiobuttonlist, c# 3 69
Make Float not to Wrap 15 66
Can't Find the Homepage on my site 4 46
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question