Solved

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

Posted on 2010-08-15
17
698 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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
How can I make a div layout like the one in the image 2 44
Clear input text 15 26
Link Anchor Not working 9 47
HTML question 2 24
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 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