Jump to content

drop down arrow change


gongpex
 Share

Recommended Posts

Hi everyone,I have tried to change the HTML <select> arrow to use my own image, I have try using CSSbut it's failed, I know from google to change <select> arrow not only CSS but mustusing javascript toobut I do not know what javascript code to change that <select>arrow image. :) as imagination :select-arrow.pngAnyone help me please!give me the javascript codeThank you very much!

Link to comment
Share on other sites

You'll need to find a Javascript library you want to use to replace the normal select elements. The ExtJS library is probably a little large for just that, but you can see examples of how they do those:http://www.sencha.com/products/extjs/examples/#sample-10http://dev.sencha.com/deploy/dev/examples/form/combos.htmlOther libraries like jQuery or Mootools probably have ways to do that also. This isn't just a select element that they changed the image for, it's a completely new field based on a regular text field with extra controls.

Link to comment
Share on other sites

I suspect that it is not just the arrow, but the whole dropdown box too. I have done something similar using below, it uses an image that acts as a background image, that is the same, or slightly larger size than the selectbox , the selectbox is then made invisible using opacity but still overlaps the bg image. Now because this dropdown is invisible, you cant see the select option you have chosen, and this is where the position span comes into play, because as soon as your chosen your option javascript updates the text within the span to your chosen option, which is position where the selected text option would appear.note: IE crap fixes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function change_selected_txt(sel_element,targetid){var x=document.getElementById(sel_element.id);var SelecteOption=x.options[x.selectedIndex].text;document.getElementById(targetid).innerHTML=SelecteOption;}/*--*//*]]>*/</script><style type="text/css">.styled_select_outer {width:172px; height:22px;}.styled_select {width: 100%;cursor: pointer; margin-top:1px;position:relative;z-index:10; opacity:0;}span.styled_selected_text {background:transparent url(select_bg_img.jpg) no-repeat scroll 0 50%;padding-left:7px;width:165px;color:#4A3E31;font-family:arial,sans-serif;line-height:21px;font-size:12px;height:22px;font-weight:normal;position:absolute;z-index:5;}</style><!--[if IE]> <style type="text/css">.styled_select{filter:alpha(opacity=0);width: 174px; margin-left:-1px; margin-top:2px; } </style><![endif]--><!--[if IE 7]> <style type="text/css">.styled_select{width: 100%; margin-left:0px; margin-top:-1px; } </style><![endif]--></head><body><div class="styled_select_outer"><span id="styled_selected_text" class="styled_selected_text">Please Select</span><select class="styled_select" id="styled_select" size="1" name="styled_select" onchange="change_selected_txt(this, 'styled_selected_text');">	  <option value="" selected="selected">Please Select</option><option value="option1">option1</option><option value="option2">option2</option><option value="option3">option3</option><option value="option4">option4</option><option value="option5">option5</option><option value="option6">option6</option><option value="option7">option7</option>   </select>	</div></body></html>

Link to comment
Share on other sites

Hi,Thanks for gives the code,I have tried and the result is only text that written "please select" and when I click it,it can show the option,but why it (select) no image?so what I must do with the code that you gave to me?please explain it to me step by stepThank you very much!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...