• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 704
  • Last Modified:

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

I need to create exactly like the attached drop down list box using CSS. How can I do it? Thanks
image002.png
0
Loganathan Natarajan
Asked:
Loganathan Natarajan
  • 6
  • 6
  • 4
  • +1
4 Solutions
 
qwerty021600Commented:
<form>
<select>
      <option>United States</option>
                              </select>
</form>
0
 
qwerty021600Commented:
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
 
Loganathan NatarajanLAMP DeveloperAuthor Commented:
@qwerty

thanks, I am more on the css desigin ..how to have a nice stylish like that?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
qwerty021600Commented:
Do u want to create the whole combo box using CSS ?
0
 
Loganathan NatarajanLAMP DeveloperAuthor Commented:
Not like that, I need to apply CSS... i mean mix of HTML + CSS
0
 
eNarcCommented:
<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
 
eNarcCommented:
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
 
Loganathan NatarajanLAMP DeveloperAuthor Commented:
@ 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
 
eNarcCommented:
your welcome logudotcom, anytime.
0
 
Loganathan NatarajanLAMP DeveloperAuthor Commented:
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
 
eNarcCommented:
where did you actually get that screenshot of the drop down box? whats the website? would u provide the link to it?
0
 
Loganathan NatarajanLAMP DeveloperAuthor Commented:
it has been provided by my client? it might be FLASH.. i doubt. i will ask him
0
 
MorrisprojectCommented:
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
 
Loganathan NatarajanLAMP DeveloperAuthor Commented:
thanks
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 6
  • 6
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now