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

x
?
Solved

dropdown with different color

Posted on 2013-05-12
4
Medium Priority
?
347 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 1000 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 1000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
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)

963 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