Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2010-08-15
17
Medium Priority
?
702 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 464 total points
ID: 33443426
0
 
LVL 5

Accepted Solution

by:
eNarc earned 1068 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 1068 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 468 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

782 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