შეცვალეთ არჩევის სტილი jQuery-ის გამოყენებით. IkSelect - იდეალური მოდული სტილისთვის ირჩევს Beautiful select jquery

ყურადღება! შემდგომი განვითარებადა მოდულის მხარდაჭერა შეჩერებულია იმის გამო, რომ ის ახლა ნაწილია.

ერთ-ერთი ყველაზე უსიამოვნო (და მე ვიტყოდი საშინელებაც) ვებ დეველოპმენტში არის html ფორმების განლაგება. სამწუხაროდ, არ არსებობს ერთიანი სტანდარტი ფორმის ელემენტების ჩვენებისთვის, ბრაუზერისა და ბრაუზერის მიუხედავად ოპერაციული სისტემა, ისევე როგორც არ არსებობს ამ ელემენტების პერსონალურად მორგება კასკადური სტილის ფურცლების გამოყენებით.

შემდეგი HTML ფორმის ელემენტები არ შეიძლება იყოს სრულად სტილიზებული:

• ჩამოსაშლელი სია;
• ჩამრთველი ;
• შეცვლა .
• ველი ფაილის გაგზავნისთვის.

როგორც უკვე ირკვევა პოსტის სათაურიდან, აქ მხოლოდ რჩეულებზე ვისაუბრებთ.

არსებობს მრავალი მზა გადაწყვეტა jQuery დანამატების სახით ჩამოსაშლელი სიების სტილისთვის. მაგრამ მე (იმის გამო, რომ არცერთი დანამატი არ მაწყობდა ამა თუ იმ მიზეზის გამო) გადავწყვიტე საკუთარი ბორბლის ხელახლა გამოგონება და დავწერე ჩემი საკუთარი დანამატი, რომელსაც ვიზიარებ ამ სტატიაში.

დაუყოვნებლივ მინდა აღვნიშნო, რომ ეს მოდული არ არის შესაფერისი არჩევის გამოყენების ყველა შესაძლო შემთხვევისთვის (წაიკითხეთ უარყოფითი მხარეები).

თქვენ შეგიძლიათ ნახოთ სელექტორი სტილის მაგალითი ჩემი მოდულის გამოყენებით. მე დავაპროექტე ისინი სურათების გამოყენების გარეშე.

• როდესაც JavaScript გამორთულია, სტანდარტული სელექტორები გამოჩნდება.
• სკრიპტი მცირე ზომისაა, დაახლოებით 4 კილობაიტი.
• მუშაობს IE6+ და ყველა თანამედროვე დესკტოპ ბრაუზერში.
• ნაჩვენებია ხაზში.
• ადვილად სტილიზებული CSS-ის გამოყენებით.
• საშუალებას გაძლევთ დააყენოთ ჩამოსაშლელი სიის მაქსიმალური სიმაღლე (CSS თვისება max-height).
• ავტომატურად არეგულირებს სიგანეს, თუ ის არ არის მითითებული.
• მხარს უჭერს მაუსის ბორბლის გადახვევას.
• აქვს „ჭკვიანი პოზიციონირება“, ე.ი. სიის გახსნისას არ სცილდება გვერდის თვალსაჩინო ნაწილს.
• შეუძლია Tab ღილაკზე დაჭერით „დაჭერა“ და კლავიატურაზე ისრებით გადართვა.
• მხარს უჭერს "გამორთული" ატრიბუტს.
• ის ასევე მუშაობს დინამიურად დამატებული/შეცვლილი არჩევით.

• არ აქვს მრავალჯერადი ატრიბუტის მხარდაჭერა, ე.ი. არ იძლევა რამდენიმე ელემენტის არჩევის საშუალებას (მრავალარჩევანი).
• არ აქვს სიის ელემენტების (ტეგი) დაჯგუფების მხარდაჭერა.
• არ უჭერს მხარს კლავიატურაზე ისრიანი ღილაკებით გადართვას, როდესაც სია იხსნება მაუსის დაწკაპუნებით.

მოდული მიუწვდომელია იმიტომ აღარ არის აქტუალური.

ვერსია: 1.0.1 | ჩამოტვირთვები: 11103 | ზომა: 7 KB | უახლესი განახლება: 07.10.2012

თუ საიტს ჯერ არ აქვს jQuery ჩართული, მაშინ დაამატეთ შემდეგი ხაზი ტეგის წინ:

jQuery-ის შემდეგ დაუყოვნებლივ შეიტანეთ ფაილი სკრიპტით:

(function($) ( $(function() ( $("არჩევა").selectbox(); )) ))(jQuery)

მოათავსეთ ეს კოდი ზემოთ მოცემული ფაილების შემდეგ ტეგის წინ.

არჩევის დინამიურად შეცვლისას საჭიროა განახლების ტრიგერის გააქტიურება, მაგალითად:

(function($) ( $(function() ( $("button").click(function() ($("select").find("option:nth-child(5)").attr("selected ", true); $("არჩევა").ტრიgger ("განახლება"); )) )) ))(jQuery)

მისი სტრუქტურა ასე გამოიყურება:

-- აირჩიეთ --

• -- აირჩიეთ --
• წერტილი 1
• წერტილი 2
• წერტილი 3

გასაცემად ირჩევს CSS-ის გამოყენებითგამოიყენეთ შემდეგი კლასები:

ასეთი სკრიპტის შექმნა საკმაოდ შრომატევადი ამოცანაა, რადგან თქვენ უნდა გაითვალისწინოთ მრავალი განსხვავებული წერტილი. დიდი იმედი მაქვს, რომ სერიოზული ხარვეზები არ გამოჩნდება. მაგრამ, თუ რამეა, გთხოვთ შემატყობინოთ კომენტარებში.

გამარჯობა, ჰაბრაუერებო და უბრალოდ მკითხველებო. შედარებით ცოტა ხნის წინ მაინტერესებდა როგორ გამოვიყენო სტილები შერჩეულ ტეგზე. ყველას უნდა, რომ ფორმის სტილი შეესაბამებოდეს საიტის დიზაინს, მაგრამ ჯერ კიდევ არ არის ყველაფრის აღწერა სუფთა CSS-ით. ამ სტატიაში ჩვენ შევხედავთ CSS-ის და JavaScript ენის ბიბლიოთეკის - jQuery-ის გამოყენებით თქვენი რჩეული სიის დაწერის მარტივ მაგალითს. ვფიქრობ, ეს მასალა განსაკუთრებით დამწყებთათვის დაინტერესდებიან. რა თქმა უნდა, უკეთესი იქნებოდა მისი დაწერა მშობლიურ JS-ში, მაგრამ ყველამ იცის, რომ კოდის მეტი სტრიქონი იქნებოდა და ძნელად გასაგები იქნებოდა.

მართალი გითხრათ, სანამ შემდეგი ველოსიპედის შექმნას დავიწყებდი, ვცდილობდი მეპოვა მსგავსი გამოსავალი, მაგრამ ვერაფერი ვიპოვე, გარდა სანახაობრივი div wrappers შერჩეული ტეგისთვის. და ვფიქრობდი, რომ კარგი იქნებოდა რაიმე მარტივი და აუცილებელი დამეწერა. აბა, დავიწყოთ!

ჩვენი პლასტილინის მოდელირების წრე მოიცავს სამ ფაილს:

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

selectbox.html

თვე

• იანვარი
• თებერვალი
• მარტი
• აპრილი
• მაისი
• ივნისი
• ივლისი
• აგვისტო
• სექტემბერი
• ოქტომბერი
• ნოემბერი
• დეკემბერი

selectbox.css

div#selectBox ( სიგანე: 250px; პოზიცია: ფარდობითი; სიმაღლე: 50px; საზღვრის რადიუსი: 3px; საზღვარი: მყარი 1px ღია ნაცრისფერი; ფონის ფერი: #fff; ფერი: #333; კურსორი: მაჩვენებელი; გადინება: დამალული; გარდამავალი: 3s; : 15px ) /* Safari-ის, Chrome-ის და Opera-ს მომხმარებლებისთვის სასიამოვნო ბონუსი არის სტილიზებული გადახვევის ზოლი. */ ::-webkit-scrollbar ( ფონი: გამჭვირვალე; სიგანე: 0.5em; პოზიცია: აბსოლუტური; ) ::-webkit-scrollbar-track (ფონი: გამჭვირვალე; პოზიცია: აბსოლუტური; z-ინდექსი: -2; ) :: -webkit-scrollbar-thumb ( საზღვარი-რადიუსი: 100 პიქსელი; ფონი: #888; ) ul#selectMenuBox (ფონი: #fff; გადასვლა: .3s; სიგანე: 100%; სიმაღლე: 200px; overflow-y: ავტომატური; overflow- x: დამალული !მნიშვნელოვანი; #333 ფონი: #e1e1e1;

ახლა სიკეთეებზე! განვიხილოთ წყარო კოდიმოდული selectbox() jQuery-სთვის, selectbox.js ფაილი:

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() ( // ობიექტის სიმაღლის გამოთვლა სიმაღლე() მეთოდის გამოყენებით var currentHeight = $(). "#selectBox").height(// შესატყვისობის პირობის შემოწმება/ ჯერ არ ემთხვევა მოცემულ სიმაღლეს, // იმის გასაგებად, თუ რა უნდა გავაკეთოთ, თუ (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)); ) ));

გარე ფაილი
სკრიპტი და დაუძახეთ დანამატს ასე:

$("სელექტორი").selectbox();

პირველი, ჩართეთ გამოძახება დოკუმენტის ობიექტის ready() მეთოდში, რათა დანამატი ჩაიტვირთოს დოკუმენტის სრულად ჩატვირთვის შემდეგ. შეგიძლიათ გაიგოთ მეტი რა არის jQuery მოდული.

ამას წინათ უცნობმა მომწერა და მთხოვა მისი ikSelect მოდულის გამოცდა, რომელიც ცდილობდა იდეალურთან რაც შეიძლება ახლოს დაეწერა. იმდენად მომეწონა დანამატი, რომ ვრცელი ტესტირებისა და შეცდომების გამოსწორების შემდეგ, გადავწყვიტე დამეწერა მიმოხილვა და ამ თემისთვის ბოლო მოეღო, ასევე დავეხმარო ჭკვიან დეველოპერს ჰაბში მოხვედრაში.

მოკლედ: მას შეუძლია გააკეთოს თითქმის ყველაფერი, რისი გაკეთებაც სტანდარტულ რჩეულს შეუძლია, იდეალურად სტილიზებული და მორგებული არჩეული განხორციელების სპეციფიკაზე. სხვადასხვა ბრაუზერები. მოდული მთლიანად კოპირდება გარეგნობა Mac OS X-ის მშობლიური სელექტორი, მაგრამ მისი სტილიზაცია შესაძლებელია CSS-ის საშუალებით უპრობლემოდ.

დახურვისას ასე გამოიყურება:

ასე ღიად:

უპირატესობები:

• მუშაობს ყველა ბრაუზერში (IE6+, FF, Opera, Chrome, Safari), მობილურის ჩათვლით
• ავტომატურად არეგულირებს სიგანეს
• ყოველთვის იხსნება გვერდის თვალსაჩინო ნაწილზე (ე.წ. „ჭკვიანი პოზიციონირება“), როგორც ჰორიზონტალურად, ასევე ვერტიკალურად
• საშუალებას გაძლევთ დააყენოთ ჩამოსაშლელი სიის მაქსიმალური სიმაღლე
• საშუალებას გაძლევთ დააჯგუფოთ პარამეტრები (ოპტჯგუფი)
• სრულად კონტროლდება კლავიატურიდან (მათ შორის, გადასვლებზე რეაგირება Tab, PgUp, PgDown, Home, End)
• აქვს არჩევანი პირველი ასოების მიხედვით (არა მხოლოდ ერთი, არამედ შემდგომი)
• მხარს უჭერს მაუსის ბორბლით გადახვევას
• ჩასმული inline (inline-block)
• მშვენივრად მუშაობს უზარმაზარი სიებით (1000+ ელემენტი)
• ტოვებს სტანდარტულ არჩევანს, როდესაც Javascript გამორთულია
• აქვს შესანიშნავი API

• არ იძლევა რამდენიმე ელემენტის ერთდროულად არჩევის საშუალებას (მრავალარჩევა)
• არ ახდენს ჩამოსაშლელი სიის გადახვევის ზოლს (რადგან ეს ძალიან დიდ გავლენას ახდენს სიჩქარეზე)
• ლუდზე არ დარბის

Opera mini-ში რჩება სტანდარტული სელექტორები, რათა თავიდან აიცილონ გვერდის გადატვირთვა სიის გახსნისას. Opera mobile-ში მუშაობს ისევე, როგორც დესკტოპის ვერსიაში.

ყველამ, ვინც სერიოზულად ეხება გვერდის განლაგებას, იცის, რომ CSS-ში შერჩევის სტილის ვარიანტები უკიდურესად შეზღუდულია. მაგრამ ძალიან ხშირად სტანდარტული სელექტი საერთოდ არ ჯდება დიზაინში, ასე რომ თქვენ გიწევთ არჩევის სტილი JavaScript-ის გამოყენებით. სინამდვილეში, ამ სტატიაში ჩვენ შევქმნით ჩვენს არჩევანს JavaScript-ის გამოყენებით.

არსებობს უამრავი მზა პლაგინი, მათ შორის jQuery, რომლებიც ამ ყველაფრის გაკეთების საშუალებას გაძლევენ. მაგრამ თუ არ გჭირდებათ რაიმე სუპერ რთული, მაშინ უფრო ადვილია ყველაფრის გაკეთება ნულიდან, სუფთა JavaScript-ის გამოყენებით.

უპირველეს ყოვლისა, მოდით შევქმნათ ჩვენი მომავალი შერჩევის HTML სტრუქტურა:

ელემენტი 1
ელემენტი 2
ელემენტი 3

ელემენტი 1

ელემენტი 2

ელემენტი 3

როგორც ხედავთ, აქ არ არის შერჩეული ტეგი. ახლა ჩვენ შეგვიძლია ჩვენი მორგებული არჩევანის სტილი, როგორც გვინდა, CSS-ის გამოყენებით:

აირჩიეთ (
ფონის ფერი: #0ee;
საზღვარი-რადიუსი: 10px;
padding: 10px 0;
სიგანე: 200px;
}
.აირჩიეთ p(
კურსორი: მაჩვენებელი;
ზღვარი: 0;
padding: 5px 20px;
}
.აირჩიეთ p.active (
ფონის ფერი: #ee0;
}

რა თქმა უნდა, აქ შეგიძლიათ გააკეთოთ ის, რაც გსურთ. და ბოლოს, ჩვენ უნდა ვაქციოთ გარეგნობა შერჩეულ ფუნქციონირებად, ანუ რამდენიმე ელემენტიდან შევარჩიოთ და გამოვყოთ მხოლოდ ერთი ელემენტი და შემდეგ ფორმასთან ერთად მივაწოდოთ. ამისათვის ჩვენ გამოვიყენებთ JavaScript-ს:

ფუნქციის არჩევა (ელემენტი) (
var value = element.getAttribute("data-value"); // წაიკითხეთ არჩეული ელემენტის მნიშვნელობა
var nodes = element.parentNode.childNodes; // მიიღეთ ყველა სხვა ელემენტი
for (var i = 0; i< nodes.length; i++) {
/* გაფილტრეთ ზედმეტი ტექსტი და შეყვანის ელემენტები */
if (HTMLParagraphElement-ის კვანძები[i]) (
/* დაამატეთ აქტიური ელემენტი არჩეულ ელემენტს, წაშალეთ ეს კლასი ყველა დანარჩენისგან */
if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "აქტიური";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = მნიშვნელობა; // დააყენეთ ფარული ველი არჩეულ მნიშვნელობაზე
}

შერჩეული ფუნქციის განხორციელების გასაღები არის ფარული ველი, რომელიც ინახავს მნიშვნელობას ჩვენი არჩევიდან. და ეს არის მნიშვნელობა, რომელიც გაიგზავნება ფორმის გაგზავნისას.

ეს არის მარტივი გზა JavaScript-ში აბსოლუტურად ნებისმიერი შერჩეული სტილის გასაკეთებლად. თუ იყენებთ jQuery-ს, კოდი კიდევ უფრო მარტივი იქნება.

რა თქმა უნდა, სტანდარტულ არჩევანს მეტი ფუნქციონირება აქვს. მაგალითად, ის პასუხობს tab-ზე და ასევე შეგიძლიათ გამოიყენოთ ისრიანი ღილაკები კლავიატურაზე ელემენტების ნავიგაციისთვის. მაგრამ თქვენ ასევე შეგიძლიათ ამ ყველაფრის განხორციელება JavaScript-ში საჭიროების შემთხვევაში.

და ბოლო რეკომენდაცია. კოდი იყენებდა noscript ტეგს და ეს შემთხვევითი არ იყო. ვინაიდან ყველას არ აქვს ჩართული JavaScript და იმისთვის, რომ ფორმა საერთოდ იმუშაოს ასეთ მომხმარებლებზე, თქვენ უნდა აჩვენოთ მინიმუმ სტანდარტული არჩევა. და ყველა, ვისაც ჩართული აქვს JavaScript, იხილავს ჩვენს მშვენიერ არჩევანს.

ვებსაიტის შექმნისას, ყველა ვებ ოსტატი ცდილობს, რომ მისი ქმნილება ყველა ბრაუზერში თანაბრად წაიკითხოს და ეს ზოგჯერ უსიამოვნებას იწვევს. ამიტომ, ამ გაკვეთილზე ვისაუბრებთ საიტის ისეთი ელემენტის შექმნასა და სტილზე, როგორიცაა აირჩიეთ ან, უფრო მარტივად რომ ვთქვათ, შერჩევის ღილაკი. ჩვენ გადავხედავთ რამდენიმე სკრიპტს, რომელიც გარდაქმნის რეგულარულ ელემენტს აირჩიეთსაიტის უფრო თანამედროვე და ფუნქციონალურ კონტროლში, რომელიც სწორად გამოჩნდება სხვადასხვა ბრაუზერები. მაშ, ვნახოთ რა მივიღეთ...

წყაროები

ამ ტუტორიალში ჩვენ გამოვიყენებთ HTML5-ს, ამიტომ პირველ რიგში ვქმნით HTML მარკირებას, რომელიც ასე გამოიყურება:

შექმენით არჩეული ელემენტი საიტისთვის | დემონსტრაცია ვებგვერდიდან




გააკეთეთ თქვენი არჩევანი აირჩიეთ პროდუქტის საინფორმაციო ფურცელი ვებ დიზაინის შესახებ CMS+ შაბლონები, დანამატები საინტერესო გაკვეთილები ვებსაიტების შექმნის შესახებ RSS სიახლეები ჩვენი ბლოგიდან ყოველთვის ახლოსაა

შემდეგი, მოდით შევხედოთ რამდენიმე ატრიბუტს, მაგალითად ატრიბუტს მონაცემებიგამოიყენება ოფციონის ელემენტებში ინფორმაციის გაერთიანებისთვის. ისინი შეიცავს პროდუქტის ხატულას და ტექსტის აღწერას ფორმატირებით. ორივე ეს ელემენტი გამოჩნდება შერჩეული ელემენტის ჩვენს ვერსიაში.

ახლა ჩვენ ვაკავშირებთ ეფექტებს, jQuery ამოწმებს ელემენტს აირჩიეთდა, მონაცემთა ატრიბუტების გამოყენებით, აშენებს მარკირებას, რომელიც დაემატება ელემენტის შემდეგ აირჩიეთ:

აირჩიეთ პროდუქტი

• JavaScript + jQuery დამწყებთათვის ვიდეო ფორმატში ნახეთ ვიდეო პრეზენტაცია
• PHP + MySQL დამწყებთათვის ყიდვა
• WordPress - პროფესიონალური ბლოგი ერთ დღეში ჩამოტვირთვა
• Joomla - პროფესიონალური საიტი ერთ დღეში ყიდვა

ჩვენი მენიუ შექმნის ნივთების შეუკვეთებელ ჩამონათვალს ლი, რომელიც წარმოადგენს თითოეულ ნივთს ვარიანტიელემენტიდან აირჩიეთ.

ახლა მოდით გადავხედოთ ჩვენს JavaScript-ს, რომელიც შეუფერხებლად აცოცხლებს ჩვენს ელემენტს:

$(document).ready(function())( // აირჩიეთ ელემენტი, რომელიც შეიცვლება: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( სიგანე: select.outerWidth() , className : "tzSelect", html: "" ));

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // გადაატრიალეთ თავდაპირველი არჩევის ელემენტი select.find("option").each(function(i)( var option = $(this if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // ვინაიდან jQuery 1.4.3 გამოიყენება, შეგვიძლია წვდომა // HTML5 მონაცემებზე. ატრიბუტები მონაცემთა() მეთოდის გამოყენებით if(option.data("გამოტოვება"))(return true;) // შექმენით ჩამოსაშლელი ელემენტი მონაცემთა ხატულისა და HTML5 მონაცემთა ატრიბუტების მიხედვით: var li = $("
• ",(html:" "+ option.data ("html-ტექსტი")+"" )); li.click(function())(selectBox.html(option.text()); dropdown.trigger("დამალვა"); // როდესაც ხდება დაწკაპუნების მოვლენა, ჩვენ ასევე ასახავს // ცვლის ორიგინალურ არჩევანს: select.val(option.val()); / შეკვრა მორგებული ღონისძიებებიჩამოსაშლელი ელემენტის ჩვენება და დამალვა: dropDown.bind("show",function())(if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown (); ).bind ("toggle",function())( if(selectBox.hasClass("expanded"))( dropDown.trigger("დამალვა"); ) else dropDown.trigger("ჩვენება"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); return false; )); // თუ დააწკაპუნებთ მაუსის ღილაკს გვერდზე ნებისმიერ ადგილას, სანამ ჩამოსაშლელი ელემენტი ღიაა, // ის დაიმალება: $(document).click(function())( dropDown.trigger("დამალვა"); )); )); აირჩიეთახლა პატარა ნიუანსი, ჩვენი ელემენტის, ორიგინალური ელემენტის შექმნისას

  შენახული იქნება დამალული hide() მეთოდის გამოყენებით. ეს არანაკლებ მნიშვნელოვანია, რადგან მასში ყველა ცვლილება აისახება. შემდეგ ჩვენ ვუყურებთ ჩვენს CSS სტილები

  #page( width:490px; margin:50px auto; ) #page h1(font-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") არა -გაიმეორეთ სიგანე: 490 პიქსელი; გვერდის ფორმა: 20 პიქსელი; - სიგანე: 460 პიქსელი: შედარებითი; :100% სიგანე:100% /* შრიფტის დაყენება: 13px/34px "Lucida Sans Unicode", "Sans-Serif":1px 0 #EEEEEE; ; /* მრავალჯერადი CSS3 ფონის გამოყენება */ background:url("../img/select_slice.png") repeat-x #ddd background-image:url("../img/select_slice. png"),url(; "../img/select_slice.png"), url("../img/select_slice.png"), url("../img/select_slice.png");ფონ-პოზიცია: 0 -136px, მარჯვნივ - 204px, 50% -68px, 0 0; ფონზე-გამეორება: არ გაიმეორე, არ გაიმეორე, არ გაიმეორე, გამეორება-x; კურსორი: მაჩვენებელი;

  -moz-საზღვარი-რადიუსი:3px; -webkit-border-radius:3px;საზღვარი-რადიუსი: 3px; ) .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded( ფონის პოზიცია:0 -170px, მარჯვნივ -238px, 50% -102px, 0 -34px; ფერი:#2c5667; text-shadow:1px #09px ;) ეს მაგალითი იყენებს ბევრ გამჭვირვალე სურათს, რომლებიც გადანაწილებულია ერთზე. მრავალჯერადიფონის სურათები

  TzSelect .dropDown(პოზიცია: აბსოლუტური; ზევით: 40 პიქსელი; მარცხნივ: 0; სიგანე: 100%; კონტური: 1 პიქსელი მყარი #32333b; საზღვრის სიგანე: 0 1 პიქსელი; სიის სტილი: არცერთი; -moz-box-sizing: საზღვარი -box-box-sizing:border-box:0 0 4px #111 .tzSelect li( height:85px; ნათესავი; ("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"); , გამეორება არ არის, გამეორება-x) .tz აირჩიეთ li:hover(ფონის პოზიცია: 50% -256px, 0 - 85px, 0 0; ) .tz აირჩიეთ li i(ფერი:#999999; ჩვენება:ბლოკი; შრიფტის ზომა:12პx; )

  გამოყენება ყუთის ზომა,ჩვენ უნდა მივცეთ მნიშვნელობა მას სასაზღვრო ყუთი, ეს ხელს შეუშლის მთლიანი სიგანის გაზრდას, ვინაიდან ჩვენი ფრაგმენტები მოთავსებულია ელემენტის შიგნით. სულ ეს არის, ჩვენი გაუმჯობესებული შერჩევის ელემენტები შეიქმნა, გისურვებთ წარმატებებს თქვენს ექსპერიმენტებში.