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

Best method to style SELECT

Hey,

I have seen a bunch of ways to customize a html select element. Any ideas on what would be the best method to do this with minimal code?

Ryan
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 4
1 Solution
 
Mrugesh1Commented:
Try this and change CSS accordingly...
 
<html>
<head>
<style type="text/css">
select {     
border: 0 none;     
color: #FFFFFF;     
background: transparent;     
font-size: 20px;     
font-weight: bold;     
padding: 2px 10px;     
width: 378px;     
*width: 350px;     
*background: #58B14C;     
} 

#mainselection {     
overflow: hidden;     
width: 350px;     
-moz-border-radius: 9px 9px 9px 9px;     
-webkit-border-radius: 9px 9px 9px 9px;     
border-radius: 9px 9px 9px 9px;     
box-shadow: 1px 1px 11px #330033;     
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;     
}

}
</style>
</head>
<body>

<div id="mainselection">      
	<select>      
	<option>Select an Option</option>      
	<option>Option 1</option>      
	<option>Option 2</option>      
	</select> 
</div> 

</body>
</html>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Then I can add this background image right?

Ryan

 Select bg
0
 
catonthecouchproductionsAuthor Commented:
So far so good. I have this:

select {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  color: #494949;
  padding: 6px 10px 0;
  width: 291px;
}
.select_wrap{     
overflow: hidden;     
width: 350px;     
-moz-border-radius: 9px 9px 9px 9px;     
-webkit-border-radius: 9px 9px 9px 9px;     
border-radius: 9px 9px 9px 9px;     
box-shadow: 1px 1px 11px #330033;     
background: url("../images/form/select_bg.gif") no-repeat scroll 0 0 transparent;     
}

Open in new window


 
Image:image select
Any ideas on how I can get the arrows on the image to show not the default element arrow.
0
 
catonthecouchproductionsAuthor Commented:
Hey, any ideas? Still can't get it to work.
0
 
catonthecouchproductionsAuthor Commented:
Hey...any ideas on how I can get the default arrows to go away?
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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