mboehler3 Posted September 24, 2009 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! Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 Share Posted September 24, 2009 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 Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author 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. Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 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. Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author Share Posted September 24, 2009 what font is that? I like itArial, Regular, 12px, Sharp (in Photoshop CS3) Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author 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? Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 Share Posted September 24, 2009 border:0; then... Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author 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... Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 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? Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author 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 Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 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 Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author 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... Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 Share Posted September 24, 2009 sorry, i meant:#inputwrap input[type=select] {rules} Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author Share Posted September 24, 2009 so like this?#inputwrap input[type=select] {border:0px;} Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 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! Link to comment Share on other sites More sharing options...
mboehler3 Posted September 24, 2009 Author Share Posted September 24, 2009 Hate IE!I agree! Thank you for your help Link to comment Share on other sites More sharing options...
chibineku Posted September 24, 2009 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. Link to comment Share on other sites More sharing options...
Synook Posted September 25, 2009 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. Link to comment Share on other sites More sharing options...
chibineku Posted September 25, 2009 Share Posted September 25, 2009 Very nice Link to comment Share on other sites More sharing options...
mboehler3 Posted September 25, 2009 Author 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, Link to comment Share on other sites More sharing options...
chibineku Posted September 25, 2009 Share Posted September 25, 2009 youre not obliged to use jquery constantly Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.