WordPress plugin for styling select. JQuery plugin for styling selectors. CSS classes that can be used to design a select

The structure will be standard

So that the select displays row one using the size attribute with values ​​of 1.

Styling for our select

Ottrimomo

Elephant Hippo Giraffe

In the application, we have written several rows of ccs power appearance with vendor prefixes, so that power works the same in all browsers. Read below about power.

All the foldability was due to the replacement of the standard arrow with the rectangular one, instead of which the background was implemented. You can insert a picture this way. It is also necessary to adjust the size for the additional background-size box

css3 power appearance helped to implement our design

This power allows you to change the appearance of an element to: button, checkbox, radio, field, icon and much more. In our episode we cried out an element, vikoristuyuchi none and added a picture for additional background

To style the select option you need JavaScript

There are jQuery connections in front of the JavaScript code

Nowadays, designers have increasingly begun to draw small HTML forms in the style of HTML 2.0, this trend is becoming more and more important, and beautiful data entry fields and select fields with rounded edges and shadows become increasingly important. You can only please, and even everything is wonderful, and CSS3 is already being victorious in many ways, allowing you to give a great look to forms, fields and selectors. It’s a pity, don’t make everything so rosy.

Regardless of the fact that all modern browsers support HTML5 and CSS3, not everyone uses them, and according to statistics, half of the users of the entire Internet, as before, use browsers of older versions, and many of them do not Enjoy the full world or use CSS3. Therefore, styling the list (Select) that appears is often done in the good old way, using jQuery (js) and PNG or GIF images. I want to tell you about one of these methods.


Below is a script that I suddenly found on RuNet sites, unfortunately, I didn’t remember the address or the name of its author. I just convey great respect to you.

Review of the code JS

Click on the script for styling "Selectu".

Review of the code JS

HTML code "select", which will be stylized

Review of the code HTML

The style will be zastosovano until selectu

Review of the code CSS

By replacing the background image, you can style the select however you like and use this example in most browsers, like the oldest ones).

I often use a similar principle of stylization of form objects on great sites and vice versa, so that we can create a new idea, so that while most web masters are reluctant to stagnate such not very simple solutions, for the sake of promoting customer success with older browsers.

Good afternoon, habrausers and just read. Porivnyano recently asked how to set the styles to the select tag. We all want the stylization of the form to match the design of the site, but so far not everything can be described with pure CSS. In this article we will look at a simple example of writing your own select list, using CSS and a JavaScript language library - jQuery. I think that especially beginners will benefit from this material. Of course, it would be better to write in native JS, but everyone knows that there would be more rows of code, and it is unlikely that it would be more intelligent.

To be honest, I’ve tried to find a similar solution, but I didn’t know anything other than effective div wrappers for the select tag. And I thought that it would be bad to write something simple and necessary. Well, that's it!

Three files share the same fate with our plasticine molding:

• selectbox.html
• selectbox.css
• selectbox.js

selectbox.html

Month

• Sichen
• Lutius
• Berezen
• Kviten
• Traven
• Cherven
• Lipen
• Serpen
• Veresen
• Zhovten
• Leaf fall
• chest

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; ) /* for users of Safari, Chrome and Opera, a welcome bonus - a stylized scroll bar. */ ::-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; li.option ( color: gray; padding: 10px; ) ul#selectMenuBox > li. option:hover ( color: #333; background: #e1e1e1; transition: .2s; )

And now for the relish! Let's take a look at the plugin's output code selectbox() for jQuery, selectbox.js file:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // cob parameters // set the standard height of the div "a. var selectDefaultHeight = $("#selectBox").height(); // rotate the image to div"e var rotateDefault = "rotate(0deg)"; // after pressing the button, a special function is used, which // calculates the output height of our div"a. // it’s easy to align with the input parameters (those that are specified in the script ) $("#selectBox > p.valueTag").click(function() ( // calculating the height of an object using the height() method var currentHeight = $("#selectBox").height(); // checking the mind escape/not escape from the given height of the head, // to understand what to do next 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)); ) )); // this is how the list itself burns when you select the required element // and changes the text of the paragraph to the text of the element in the list $("li.option").click(function() ( $("#selectBox").height(selectDefaultHeight); $ ("img.arrow").css((transform: rotateDefault)); $("p.valueTag").text($(this).text()); )); ); )) (jQuery);

$("selector").selectbox();
First, enable the call in the ready() method of the document object, so that the plugin is loaded after the document is fully loaded. You can find out what this jQuery plugin is.

Anyone who is seriously involved in page layout knows that the possibilities of select styling in CSS are greatly enhanced. Even though a standard select often doesn’t fit into the design, you have to work with select styling via JavaScript. In fact, this article allows you to create your own select using JavaScript.

There are a lot of ready-made plugins, including jQuery, that allow you to do everything. If you don’t need a complex structure, it’s easier to build everything from scratch using pure JavaScript.

First of all, let's create the HTML structure of our new select :

Element 1
Element 2
Element 3

Element 1

Element 2

Element 3

As you know, there is almost no select tag here. Now we can easily style our select with additional CSS:

Select (
background-color: #0ee;
border-radius: 10px;
padding: 10px 0;
width: 200px;
}
.select p(
cursor: pointer;
margin: 0;
padding: 5px 20px;
}
.select p.active (
background-color: #ee0;
}

Insanely, you can earn anything you like. And, you decide, you need to change the look of the functionality of select , so that you select and highlight less than one element from the decals, as well as from managing the form at the same time. For whom are we speeding up JavaScript:

Function select(element) (
var value = element.getAttribute("data-value"); // Read the value of the selected element
var nodes = element.parentNode.childNodes; // Remove all other elements
for (var i = 0; i< nodes.length; i++) {
/* Third-party elements are filtered text and input */
if (nodes[i] instanceof HTMLParagraphElement) (
/* Adding active to the selected element, erasing this class from all others */
if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = value; // Sets the hidden field's value
}

The key point in implementing the select functionality is the hidden field where the value from our select is recorded. The same information will be sent at the time of submitting the form.

The axis in such a simple way is absolutely timid, be it stylization of select JavaScript. If you use jQuery, the code will be even simpler.

Insanely, the standard select has more functionality. For example, it responds to tab, so you can also move through the elements using the arrow keys on the keyboard. But all this can also be implemented in JavaScript if necessary.

First recommendation. The code has a noscript tag, and it is not clear. Not everyone has JavaScript enabled, and in order for the form to work for such users, you need to enter a standard select. And everyone who has JavaScript enabled, please use our select tool.

Respect! Further development and support of the plugin in connection with what is now partly.

One of the most unacceptable (and I mean greedy) speeches in web development is the set of HTML forms. Unfortunately, there is no uniform standard for displaying form elements, regardless of the browser or operating system, as well as the ability to adequately design actions from these elements, vikoryst and cascading style sheets.

The following HTML form elements cannot be further stylized:

• list of things to open;
• ensign;
• peremikach.
• field for uploading the file.

As you can already see from the title of the post, there is more to say about selectivity.

There are a lot of ready-made solutions in the form of jQuery plugins for styling lists that open. However, I (through those that come from plugins, without taking into account these and other reasons) having chosen the way to the exit of my wheel and having written a power plugin, which I am sharing in this article.

I would like to point out that this plugin is not suitable for all possible situations of selection stagnation (read a few).

You can see the example of selector styling using an additional plugin. I created this design without using a vikoristan to depict it.

• When JavaScript is enabled, standard selectives appear.
• The script is small in size, approximately 4 kilobytes.
• Works in IE6+ and all current desktop browsers.
• To be introduced internally.
• Easily customizable via CSS.
• Allows you to set the maximum height for the list (CSS power max-height).
• Automatically adjusts the width if it is not specified.
• Supports scrolling of the mouse wheel.
• May have a “reasonable positioning”, that is. When you open the list, do not go beyond the visible part of the page.
• You can “catch” the pressure of the Tab key and move the arrows on the keyboard.
• Supports the "disabled" attribute.
• Works with selectors that are dynamically added/changed.

• It does not support the multiple attribute, then. does not allow selecting multiple items (multi-select).
• Does not support grouping of list elements (tag).
• It is not advisable to move the arrows on the keyboard if the list of mouse clicks is open.

The plugin is unavailable because VIN is not current.

Version: 1.0.1 | Zavantazhen: 11103 | Size: 7 KB | Last updated: 10/07/2012

If jQuery is not yet enabled on the site, add a leading line before the tag:

Immediately after jQuery, connect the file with the script:

(function($) ( $(function() ( $("select").selectbox(); )) ))(jQuery)

This code should be placed before the tag after the specified files.

When dynamically changing selectors, it is necessary to launch the refresh trigger, for example:

(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5))).attr("selected ", true); $("select").trigger("refresh"); )) )) ))(jQuery)

Its structure looks like this:

-- Select --

• -- Select --
• Paragraph 1
• Point 2
• Point 3

To create selectivity for additional CSS, use the following classes:

The creation of such a script is enough to keep you busy, while you have to deal with a lot of different things. I am sure that there will be no more serious bugs. Hello, let me know in the comments.