[Select-Form]: We write our select list using jQuery and CSS

Hello, habrayuzer and just reading. Relatively recently, I wondered how to apply styles to the select tag. Everyone wants the stylization of the form to match the design of the site, but for now not everything can be described with pure CSS. In this article we will look at a simple example of writing your select list using CSS and the jQuery library of JavaScript. I think, especially newcomers will be curious about this material. Of course, it would be better to write on native JS, but we all know that there would be more lines of code, and it would hardly be clearer.

Honestly, before taking on the creation of another bike, I tried to find a similar solution, but in addition to the spectacular div wrappers for the select tag I did not find anything. And I thought it would be nice to write something simple and necessary. Well, well, let's start!

There are three files in our modeling clay cup:

selectbox.html
selectbox.css
selectbox.js

Consider them in turn. First, let's pay attention to the simplest thing in this example - the layout of the list or the selectbox.html file:
')

selectbox.html

<!-- ///////////////////////////////////////////////////////////////////////////////////////////      -... --> <!--     --> <div id=selectBox> <!--      , ,  div-   --> <img src="arrow.png" alt="" width='15px' class=arrow /> <!-- ,      --> <p class=valueTag name=select></p> <!--     --> <ul id=selectMenuBox> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> </ul> </div> <!--   --> </body> </html>

As can be seen from the source html-code, our list will prompt us to choose a month. Now consider the selectbox.css file:

selectbox.css

 div#selectBox { width: 250px; position: relative; height: 50px; border-radius: 3px; border: solid 1px lightgrey; background-color: #fff; color: #333; cursor: pointer; overflow: hidden; transition: .3s; } div#selectBox p.valueTag { padding: 15px; cursor: pointer; transition: .2s; height: 40px; } div#selectBox > img.arrow { position: absolute; right: 0; width: 50px; padding: 15px; } /*   Safari, Chrome  Opera   —  -. */ ::-webkit-scrollbar { background: transparent; width: 0.5em; position: absolute; } ::-webkit-scrollbar-track { background: transparent; position: absolute; z-index: -2; } ::-webkit-scrollbar-thumb { border-radius: 100px; background: #888; } ul#selectMenuBox { background: #fff; transition: .3s; width: 100%; height: 200px; overflow-y: auto; overflow-x: hidden !important; position: absolute; margin-top: 00px; display: block; } ul#selectMenuBox > li { display: block; padding: 10px; border-radius: 00px; cursor: pointer; } ul#selectMenuBox > li.option { color: gray; padding: 10px; } ul#selectMenuBox > li.option:hover { color: #333; background: #e1e1e1; transition: .2s; }

There are no special difficulties here if you know the basics of layout and markup using HTML and CSS3, respectively.

And now to the goodies! Consider the source code for the selectbox () plugin for jQuery, the selectbox.js file:

selectbox.js

 (function( $ ) { $.fn.selectbox = function() { //   //    div'a. var selectDefaultHeight = $('#selectBox').height(); //     div'e var rotateDefault = "rotate(0deg)"; //     ,   //     div'a. //        (,     ) $('#selectBox > p.valueTag').click(function() { //     height() var currentHeight = $('#selectBox').height(); //    /     , //  .   . if (currentHeight < 100 || currentHeight == selectDefaultHeight) { //        ,   , //        . $('#selectBox').height("250px"); // «  » //         CSS3 $('img.arrow').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } //     (    250 ), //        valueTag,     //      +      if (currentHeight >= 250) { $('#selectBox').height(selectDefaultHeight); $('img.arrow').css({transform: rotateDefault}); } }); //         //          $('li.option').click(function() { $('#selectBox').height(selectDefaultHeight); $('img.arrow').css({transform: rotateDefault}); $('p.valueTag').text($(this).text()); }); }; })( jQuery );

There was more code, but managed to be compressed thanks to the css () and height () methods. Designed as a plugin for convenience and reuse. You can do it the way you like, if only it works, so I won't be offended if someone optimizes my crutch. To call it is enough to connect an external script file and call the plugin as follows:

 $('selector').selectbox();

Previously, including a call to the ready () method of the document object so that the plugin loads after the document is fully loaded. You can find out more about what a plugin on jQuery is here .

It turned out something like this:

Thanks for attention! Make it simple and with style!

PS: I hope that this article will help someone in solving this / similar issue.

Source: https://habr.com/ru/post/312532/

All Articles

[Select-Form]: We write our select list using jQuery and CSS

More articles: