Solved

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

Posted on 2010-08-15
17
695 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
2 CSS questions 11 35
Image decoding from Camera 3 45
Css issue on scroll 1 18
CSS grid style change 2 14
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…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

757 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

21 Experts available now in Live!

Get 1:1 Help Now