gongpex Posted March 21, 2011 Share Posted March 21, 2011 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 :Anyone help me please!give me the javascript codeThank you very much! Link to comment Share on other sites More sharing options...
justsomeguy Posted March 21, 2011 Share Posted March 21, 2011 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 More sharing options...
dsonesuk Posted March 21, 2011 Share Posted March 21, 2011 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 More sharing options...
gongpex Posted March 22, 2011 Author Share Posted March 22, 2011 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 More sharing options...
gongpex Posted March 22, 2011 Author Share Posted March 22, 2011 Hello,It's work after I tried using my own image that size appropriate on your CSS size it's really work,THANK YOU VERY MUCHmay God bless you Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.