Styling the select dropdown list. CSS design of select - use the appearance property

Very often, designers draw layouts with non-standard form elements, i.e. The design of checkboxes, radio buttons, inputs and selectors differs from what the browser renders by default. Thus, the layout designer is faced with the task of customizing the design, including select elements.

In this article we will look at how to change appearance select However, we will adhere to the following ideology. It makes sense to customize only the default collapsed state of the selector, and the design of the drop-down list should remain standard. Therefore, the solution described below will not work if you need a complex dropdown list, for example, with icons or checkboxes for each option.

On the other hand, this approach allows:

1. Don't write javascript code, which would emulate the behavior of selectors. All logic rests with the browser. There are a lot of plugins today, but you don’t often come across one that would handle all the edge cases that the user encounters when interacting with this control. An example of such an extreme case would be automatic selection drop-down list position (opening down or up).

2. Since the browser is responsible for the behavior and design of the drop-down list, then there is no need to write any separate solution for mobile devices, which would allow you to conveniently work with selectors on touch devices with small screens. Built-in native selectors themselves accept the right type, because on mobile platforms everything has already been thought out. For example, iOS users when you click on the selector, they will see not your custom list, but the standard familiar one. Users will not need to adjust their behavior to your specific site; their behavior will be the same as on all other sites. And it’s convenient for him, and for this reason you made the site.

So, as already mentioned, CSS3 properties are enough to design the select.

The main property that will allow you to change the appearance of the selector is appearance . It forces an element to become whatever you want it to be, for example you can force a div to become a button. However, for our purposes, the interesting value is none , which means that the element does not need to be styled at all. This way we can remove the select-specific attribute - the down arrow on the right.

Select ( -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; )

As you can see, removing the arrow was not difficult, now all that remains is to add a few trivial CSS properties like frame, font, and so on. Here, of course, you can add rounded corners, shadows, etc., everything as the designer drew in the layout. The main drop-down list remains native.

Select ( background: transparent; display: block; width: 100%; border: 1px solid #a7a7a7; color: #32353a; font-family: 16/Arial, sans-serif; font-size: 16px; line-height: 1.4 ; font-weight: normal; padding: 7px 7px 10px; vertical-align: top; -webkit-appearance: none; : none !important )

Now all that remains is to add an arrow or some other icon as the background. We will use the background, since pseudo-elements like before and after will not work for the select. For better display sites on various devices with different pixel densities, at various scales and so on. It is common to use SVG icons. Therefore, using an online URL encoder for SVG, we will convert the icon into a data URI. It is important to remember that the SVG tag must have the xmlns="http://www.w3.org/2000/svg" attribute.

You will get the following result.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" fill-rule ="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Since the arrow used is non-standard, you can move it to the left or use any other image instead of the arrow, or you can do without icons altogether.

Connect CSS file in the head section:

.. ..

If you want to use a different theme, don't forget to copy the CSS file to your project folder.

Applying a style to Select

When using EasyDropDown.js, your markup remains clear and intuitive. You just need to add normal element select . You can also turn off this element, assign a label and designate the element that should be selected by default.

To style an element, just assign the dropdown class to it. Here's an example:

Setting Option 1 Option 2 Option 3 Option 4 Option 5

That's all, you don't need anything else. Now your SELECT element will be prettier.

If you need to initially select an element, use the selected attribute. IN in this case We do not recommend using the label, because... The display may be slightly distorted.

... Option 2 ...

You can also disable an element by adding the disabled attribute:

...

Choosing a theme

The EasyDropDown.js plugin comes with 2 style themes: Metro and Flat. To connect them, use the HTML5 data-attribute attribute.

To apply a different theme, inside the SELECT element write data-settings="("wrapperClass":"theme-name")" . The theme-name parameter can take the following values: metro or flat . Examples:

...

Attention! Further development and support for the plugin has been stopped due to the fact that it is now part of .

One of the most unpleasant (and I would even say terrible) things in web development is the layout of html forms. Unfortunately, it doesn't exist uniform standard display of form elements, regardless of browser and operating system, just as there is no way to customize some of these elements using cascading style sheets.

Cannot be completely stylized the following elements html forms:

• drop-down list ;
• checkbox ;
• switch .
• field for sending a file.

As is already clear from the title of the post, here we will only talk about selects.

There are many ready-made solutions in the form of jQuery plugins for styling drop-down lists. But I (due to the fact that none of the plugins suited me for one reason or another) decided to go by reinventing my own wheel and wrote my own plugin, which I share in this article.

I would like to point out right away that this plugin not suitable for everyone possible cases using selectors (read the disadvantages).

Demonstration of the plugin

You can see an example of selector styling using my plugin. I designed them without using images.

Advantages

• When JavaScript is disabled, standard selectors are displayed.
• The script is small in size, approximately 4 kilobytes.
• Works in IE6+ and all modern desktop browsers.
• Displayed inline.
• Easily styled using CSS.
• Allows you to set maximum height for a drop-down list (CSS property max-height).
• Automatically adjusts the width if it is not specified.
• Supports mouse wheel scrolling.
• Has “smart positioning”, i.e. does not go beyond the visible part of the page when opening the list.
• Can “catch” pressing the Tab key and switch with arrows on the keyboard.
• Supports the "disabled" attribute.
• It also works with dynamically added/changed selects.

Flaws

• Does not support the multiple attribute, i.e. does not allow selecting multiple items (multi-select).
• Does not support grouping of list items (tag).
• Does not support switching with arrow keys on the keyboard when the list is opened by clicking the mouse.

Download

The plugin is not available because it is no longer relevant.

jQuery plugin “SelectBox Styler”

Version: 1.0.1 | Downloads: 11103 | Size: 7 KB | Last update: 07.10.2012

Updates 09/22/2012 Converted the script into a plugin (including a minimized version), and also added support for dynamically adding/changing selects. 10/07/2012 Fixed the behavior of the script when using the onchange method of the tag. Connecting the plugin

If jQuery is not yet enabled on the site, then add next line before the tag:

Immediately after jQuery, include the file with the script:

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

Place this code before the tag after the above files.

At dynamic change Selectors need to run a refresh trigger, for example:

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

HTML code after plugin execution

Its structure looks like this:

-- Select --

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

-- Select -- Item 1 Item 2 Item 3

CSS classes used to style the selector

To issue selects with using CSS, use the following classes:

.selectbox	parent container for the entire select
.selectbox .select	select in collapsed state
.selectbox.focused .select	focus on select when pressed Tab key
.selectbox .select .text	nested tag for collapsed select in case of insertion background image using the sliding door technique
.selectbox .trigger	right side of the collapsed select (conditional switch)
.selectbox .trigger .arrow	subtag for radio button (arrow)
.selectbox .dropdown	wrapper for dropdown list
.selectbox .dropdown ul	drop-down list
.selectbox li	select item (option)
.selectbox li.selected	selected select item
.selectbox li.disabled	disabled (not available for selection) select item

Conclusion

Creating such a script is a rather painstaking task, since you have to take into account many different points. I really hope that no serious bugs will appear. But, if anything, please let me know in the comments.

With the advent of CSS3 it became possible to do beautiful style for any element on the site. Because CSS3 provides a wide range of capabilities that speed up the process of developing a website design. Today we will style the select element in CSS. For those who don’t know, this element is responsible for the drop-down list on the site. Many people use standard view, but it can be changed to suit the design of your site.

There is nothing better than seeing what the list looks like with your own eyes:

Download

This is what this Select looks like in CSS:

Similar articles on this topic:

Now I’ll describe the installation process step by step using this drop-down list or simply Select.

1 step. We connect the necessary files

It's simple. After downloading the archive with the sources from there, we will need 2 files (style.css and select.js - if you are connecting the first option of the list or select_demo2.js - if you are connecting the second option). We connect these two files between the tags:

1 2

Step 2. HTML structure Select element

There is nothing super complex in the structure (and why should there be, it’s just HTML :)). Simple form, inside which there is a drop-down Select with its items:

1 2 3 4 5 6 7 8 9 10 11 12

UK countries: Please select a country: England Northern Ireland Scotland Wales

Step 3. Adding styles for Select CSS

There are not many of them. I provide below the styles for the first option of the list. I would like to draw your attention to the paths to the images. There are only two of them: the first is for opening the list, and the second is for closing. They look like two arrows “up” and “down” respectively. They can be downloaded from the sources located at the beginning of the article:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.dropcontainer ( position : relative ; font-size : 16px ; color : #777 ; ) .trigger ( color : #777 ; padding : 10px ; font-size : 16px ; width : 50% ; background : #fff url () 98 % center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease) .trigger: hover ( color: #777; background: #f5f5f5 url (../images/select-arrow-open.png ) 98% center no-repeat ; ) .activetrigger ( color : #777 ; padding : 10px ; font-size : 16px ; width : 50% ; background : #f5f5f5 url () 98% center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box; ) .activetrigger :hover ( background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ;

color : #777 ;

) .activetrigger :active ( background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; color : #777 ; ) .dropcontainer ul ( font-size : 16px ; border : 1px solid #ccc ; background : #fff ; padding : 0 ; width : 50% ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; .dropcontainer ul li ( padding : 5px ; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5 s ease; -o-transition : all 0.5s ease; transition : all 0.5s ease ) .dropcontainer ul li :hover ( background : #f5f5f5 ; outline : none ; ) .dropcontainer ul li :first-child ( display : none ; ) .dropcontainer ul li :last-child ( border-bottom : none ; ) .dropdownhidden ( display : none ; ) .dropdownvisible ( height : auto ; )

You need to replace the last dropdownvisible property:

1 2 3

.dropdownvisible ( height : auto ; )

1 2 3 4

.dropdownvisible ( height : 200px ; overflow-y : scroll ; )

And if you don’t forget to replace the scripts (see above what to change to what), you will get the following:

In which browsers does this Select CSS (dropdown list) work fine?

• ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
• ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
• ✓ Opera 12.14, Opera 12.15, Opera 12.16
• ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• ✓ Apple iOS– iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
• ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Addition to the lesson - creative hover effect + VIDEO

In addition to the lesson, I want to tell you how to make another effect on the site very unusual: the hover effect. Watch this short video and you will see everything for yourself.

Conclusion

Another element of the site - Select can be changed to suit your design using CSS and Javascript. There is nothing complicated in the installation process, so you will succeed. Also, as a supplement to the article, you receive creative way and installation video.