How to stylize select on JavaScript (not JQUery) and CSS, I found what I need, but I can’t download and figure out anything, help distribute the scheme of actions (well, make it shorter)!

    4 answers 4

    I implemented it like this: Own select html javascript css

      Create a div layer with an absolute position with a fixed width and height. Also write in his style

       overflow-x:none; overflow-y:scroll;

      or so

       overflow-x:none; overflow-y:auto;

      Pike into the main div a bunch of divs, each div with his own word (which will be in select).

      That's all.

      Then show the main layer when you click on someone.

      here's a layer

       <div class="select"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

      style to it

       .select { width:90px; height:150px; position:absolute; left:0px; top:30px; border:1px solid #ff0000; overflow-x:none; overflow-y:auto; } .select div { cursor:pointer; } .select div:hover { background:#555555; }

      You can use background pictures, etc.

      In order to make this layer pop up by pressing the down arrow, you need to create another layer.

       <div style="position:relative; width:92px;"> <div style="height:30px;">нажми чтобы выбрать</div> <!-- сюда нужно воткнуть слой селекта который написан выше --> </div>

      something like this, did not check what happened but should work

      • Thanks a lot, but I already managed it myself :))) - Kirpich643
      • if it's interesting then at here plus.onzagame.ru in the registration of the choice of the floor ... - Kirpich643
      • And I will be happy if someone tells me why the animation is so buggy? - Kirpich643
      • @ Kirpich643, before solving problems with animation, I would advise fixing more tangible bugs. For example, this is what I see after the start of the "registration" (the first window is not completely hidden). I click on the choice of gender, but if I don’t choose, then the list is not hidden. When starting to type your email, "tips" pop up in a mysterious place . - Deonis

      This is not the only resource in the internet. Spent two full minutes:

      1. Custom Drop-Down List Styling .
      2. Styling Drop Down Boxes with jQuery .
      3. Styling Dark Select Dropdown With Dropkick.js .
      • You're just Internet gurus! I fucked up two days so that the one who was the last to find it))) - Kirpich643
      • @ Kirpich643, correctly composed query in the search engine and no magic or guru)) - Deonis
      • here, what you found was all with jQuery ... This doesn't suit me (((((((( - Kirpich643

      There is a very good, versatile jQuery plugin Select2 with many features.

      • one
        The question indicated is not jQuery . Do not forget that JavaScript is not limited to jQuery - tutankhamun