Solved

dropdown with different color

Posted on 2013-05-12
4
340 Views
Last Modified: 2013-05-13
Hi,

My application is in ASP.net 2.0

I need to create a dropdown in orange color as in attached image.

Please help me in creating this dropdown.

My rendered html is html 4.0

Regards,
dropdown.png
0
Comment
Question by:tia_kamakshi
  • 2
4 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39159900
You need to use javascript
Here is a jquery example - you will still have to create your own orange images.
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
0
 
LVL 4

Expert Comment

by:ramyajanarthanan
ID: 39160857
Put this code in a file and check it out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		  <link rel="stylesheet" type="text/css" media="all" href="css/default.css" />
		  <link rel="stylesheet" type="text/css" media="all" href="css/jquery.selectbox.css" />
		  <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
		  <script type="text/javascript" src="js/jquery.selectbox-0.6.1.js"></script>
    </head>
    <body>
    	
				<dd id="demo-default-usage">
					
						<select id="default-usage-select">
							<option value="--">Please select your favorite color</option>
							<option value="01">Red</option>
							<option value="02">Orange</option>
							<option value="03">Yellow</option>
							<option value="04">Green</option>
							<option value="05">Blue</option>
							<option value="06">Magenta</option>
							<option value="07">Violet</option>
							<option value="08">Ultra-violet</option>
						</select>
						
					
					
		<script type="text/javascript">
		//<![CDATA[
			$("#default-usage-select").selectbox().bind('change', function(){
				$("<div>Value of #default-usage-select changed to: "+$(this).val()+"<\/div>").appendTo('#demo-default-usage .demoTarget').fadeOut(5000, function(){
					$(this).remove();
				});
			});
		//]]>
		</script>
		
    </body>
</html>

Open in new window


refer to this link and you can  download the required js and css files from here.
http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
0
 
LVL 4

Accepted Solution

by:
ramyajanarthanan earned 250 total points
ID: 39160862
if you want to just customize with simple css then  you can use the following code.Change the path of the background url to yours

<html>
<head></head>
<body>
<div class="selectstyle">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>
</body>
</html>
<style>
.selectstyle select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }
.selectstyle {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url('img/down_arrow_select.jpg') no-repeat right #ddd;
   border: 1px solid #ccc;
   }

</style>

Open in new window

0
 

Author Closing Comment

by:tia_kamakshi
ID: 39162435
Many Thanks
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 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