Good all the time of the day gentlemen

Can anyone give an example, 2 different select'v, so that the design does not concern the standard select'a, and was replaced by the selector arrow with a picture?

ps Fix all selects at once - it does not matter. Find a script that would change the ohmlenie - it does not matter. 2 different selections that do not change the design of the standard - here I have problems with css and js, although everything seemed simple

  • 2
    I don’t understand what the problem may be: (Assign different classes to different selections. Write styles for classes, not tags. Change classes by changing the appearance of the select and not touching the standard select without the class. Different classes have different designs. At least 100,500 designs in one form ... - iKuzko
  • yes so it is so, if you change the class only css properties. Now, if you try js replace the arrow at the selects - everything will go. Would it not be so easy to ask - sergey
  • one
    as before, in perplexity ... what prevents the javascript from changing the arrow only to those selects that have the appropriate class? - iKuzko
  • Dear, I am not a guru in JS but nevertheless I couldn’t replace the layout of 2 different selectors with the script on one form, I don’t change the layout of the others. If this is something elementary, please scare the code. To take the same example from @lampa - surprisingly easier than what I used, but oddly enough it works in relation to one select (which is sad). If it were pure css, everything would be easy - sergey

1 answer 1

As always, I ’ll introduce my select, once done as an example for @heidel :

Own select html javascript css :

We see the line that indicates the class:

var select_menu = $('<ul />', { class: 'menu' }).insertAfter(select_wrap);

Replace with:

 var select_menu = $('<ul />', { class: $this.attr('data_class') }...

And at attribute:

 <select name='1234' data_class='first_class'> <option value='1'>first</option> <option value='2'>second</option> <option value='3'>third</option> <option value='4'>fourth</option> </select>

Here so it is possible to establish the class for everyone.

  • I did everything that way (I even tried to test it online on jsbin). The code in the form of the link really changes the design of the select, but for all, in the corrected form, it is just standard. jsbin.com/itojof/1/edit actually, with all of the seemingly simple topics, I have been working with a simple select since last week - sergey