mboehler3 9 Posted September 24, 2009 Report Share Posted September 24, 2009 Hi I want to add style to the drop down menu on my form. Here's a picture of what I want it to look like:I'm able to get a basic, standard drop-down menu, over my input box image, like this:Is it possible to get the first picture as a result using CSS? Any help is appreciated, I just need to be pointed in the right direction.Thanks! Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 (edited) Hm, well you can change the background color and the width to push the arrow over and give it border none, but there isn't a selector for styling the arrow itself as it appears to be a browser default. You can absolutely position an image over the arrow, but it prevents you clicking the real one. Some javascript might be able to get around that, otherwise your best bet is just using a drop down list with the appropriate functionality added via javascript.Edit: what font is that? I like it Edited September 24, 2009 by chibineku Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 How would I style the bgcolor, width and border? The code on the page for the second image looks like this: <div id="inputWrap"><select name='ImportantFactor'> <option value='Select one'>Select one</option> <option value='Full-service'>Full-service</option> <option value='Online'>Online</option> <option value='Price'>Price</option> <option value='Customer service'>Customer service</option> <option value='Other'>Other</option></select></div> As you can see there's no class set up for the dropdown. Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 (edited) #inputwrap select {background: #whatever;border: none;width: whatever;}Re font: same as the one I have - good thing I like it. Edited September 24, 2009 by chibineku Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 what font is that? I like itArial, Regular, 12px, Sharp (in Photoshop CS3) Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 #inputwrap select {background: #whatever;border: none;width: whatever;}Re font: same as the one I have - good thing I like it.border:none; doesn't seem to work... is there another way to remove that 1px border around the box? Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 border:0; then... Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 border:0; then...That doesn't work either... I'm searching other sites too but can't find a solution... Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 That doesn't work either... I'm searching other sites too but can't find a solution...Hm, works in FF. What are you trying it in? Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 That doesn't work either... I'm searching other sites too but can't find a solution...It does work in FireFox, but not IE Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 It does work in FireFox, but not IETry using the selector #inputwrap input[type=select]Otherwise I'm out of ideas Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 Try using the selector #inputwrap input[type=select]Otherwise I'm out of ideasI don't understand that code... like #inputwrap {input-type:select;}? That doesn't exist... Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 sorry, i meant:#inputwrap input[type=select] {rules} Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 so like this?#inputwrap input[type=select] {border:0px;} Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 Yeah, that ought to work....but actually in FF doens't seem to. The selector is valid in IE, I believe, but setting border to 0 or none doesn't seem to work... Hate IE! Quote Link to post Share on other sites
mboehler3 9 Posted September 24, 2009 Author Report Share Posted September 24, 2009 Hate IE!I agree! Thank you for your help Quote Link to post Share on other sites
chibineku 0 Posted September 24, 2009 Report Share Posted September 24, 2009 The cross browser compatible way is to alter it from a select menu to a menu with submenu and use CSS pseudo-classes and javascript to give it the functionality you need. Sorry I couldn't be more help. Quote Link to post Share on other sites
Synook 47 Posted September 25, 2009 Report Share Posted September 25, 2009 I wrote this script a while ago: http://www.aspektas.com/blog/a-custom-sele...ing-javascript/ - it uses JavaScript to style a select. Quote Link to post Share on other sites
chibineku 0 Posted September 25, 2009 Report Share Posted September 25, 2009 Very nice Quote Link to post Share on other sites
mboehler3 9 Posted September 25, 2009 Author Report Share Posted September 25, 2009 I wrote this script a while ago: http://www.aspektas.com/blog/a-custom-sele...ing-javascript/ - it uses JavaScript to style a select.yea that's a cool script. My site strictly uses jQuery so this isn't an option, but thanks for submitting your link, Quote Link to post Share on other sites
chibineku 0 Posted September 25, 2009 Report Share Posted September 25, 2009 youre not obliged to use jquery constantly Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.