2

Possible Duplicate:
How to hide a <option> in a <select> menu with CSS?

I have styled a select option menu using jquery .customSelect() but anyway on page load the old styled version appears (see the image). As I see this script sets the opacity to the old select option to "0" that's why it disappears (it goes to background) after the page is fully loaded. Any ideas how to make the old styled always be invisible(or hidden)?

I've done a screenshot Screenshot

SOLUTION: set opacity to "0" so they are already hidden before the javascript then adds that style Thank you Pete

Community
  • 1
  • 1
Andrew Ceban
  • 118
  • 15

2 Answers2

1

If I understand this question correctly you are trying to hide the drop down lists before they are styled. In which case you can do this in a couple of ways:

position them absolute and put their left to -9999px or just make their opacity 0 in the style sheet so they are already hidden before the javascript then adds that style

You shouldn't really use display:none or visiblity:hidden for inputs as some browsers then don't post their values

Pete
  • 57,112
  • 28
  • 117
  • 166
  • yep this worked for me I set opacity to "0" so they are already hidden before the javascript then adds that style – Andrew Ceban Dec 20 '12 at 14:15
  • once you have your styled select, if you inspect the element you will actually see you are selecting options from an unordered list and not a select. Sorry, just checked and custom select just uses divs instead of a list – Pete Dec 20 '12 at 14:16
  • I know this is already accepted, but it should be noted that if you decide to use opacity, this is not supported in IE8 and below, view this fiddle in IE8/7 to see what I mean http://jsfiddle.net/HRRgc/ – Sean Dec 20 '12 at 14:49
  • Which is why my preferred option would be to whack it off screen with absolute positioning, also you haven't used the correct css for opacity for ie8 and lower: http://jsfiddle.net/HRRgc/1/ – Pete Dec 20 '12 at 14:53
  • if you are bothered about older versions of other browsers, this should pretty much cover opacity: http://jsfiddle.net/HRRgc/2/ – Pete Dec 20 '12 at 15:02
0

How about setting it to visibility:hidden in the css? Assuming this doesn't interrupt the jQuery menus that are generated.

n00dle
  • 5,949
  • 2
  • 35
  • 48
  • jquery overlaps new design on the old using opacity to hide old select options and because of that you are still able to make a click on it , but if I setting it to visibility:hidden, I cannot click anymore on it, this mean select menu doesn't work already – Andrew Ceban Dec 20 '12 at 13:59
  • You could use JS to change it back to visible once the page loads? Although I'm starting to agree with Joseph the Dreamer - if your user doesn't have JS enabled, they'll see nothing at all. – n00dle Dec 20 '12 at 14:00