Solved

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

Posted on 2010-08-15
17
696 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now