The select tag simulation/beautification method uses JS plug-in_jquery

The appearance of the

tag is very annoying. Each browser is inconsistent. For IE alone, one version has a different appearance, and it cannot be modified with CSS.

Here I will share my method of beautifying

.
Advantages: Still using , only changes the appearance, does not change or interfere with the Form behavior, and loads JS later. (Note: This script relies on jQuery)

Nothing to say, it’s all in the code.

Copy code The code is as follows:

$(document).ready(function () {
// Find the

tag that needs to be beautified. We use a class name "beautify" to determine it. There is no < of this style. select> will be ignored
var selects = $("select.beautify");
if (selects.length > 0) {
//First add a

at the bottom of the code, Used to host and display drop-down box options
$("body").append("

");
//Beautify them one by one
selects.each(function () {
//Set an alias for this (that is, ) under this function, which will be used in the following anonymous function Used
var select = this;
//Create an , .dummy will be used for our special style definition of this type of
//At the same time, //After creation, insert this into the dom, followed by the original
var input = $("")
.attr("disabled", this.disabled)
.css("width", parseInt(this.style.width ) "px")
.css("display", this.style.display)
.insertAfter(this)
.val(this.options[this.selectedIndex].text);
//Hide and do not define display:none in .beautify, because when js fails to load, we still have to use it
this.style.display = "none";
/ / When is clicked
input.click(function () {
// Call out the previously created

and clear the content
// Pass the style sheet of to it. When you need to modify this

, rely on these style definitions
var div = $("#dummydata")
.empty()
.attr("class", select.className);
//Set the width of

//Here we determine a special class name "extend"
//If it contains .extend, it means that the width will be subject to additional custom control; otherwise, the width will be consistent with

by default
$(select).hasClass("extend")
? div.css ("width", "")
: div.css("width", $(this).innerWidth());
//Copy to

Inside, an corresponds to an tag
for (var i = 0; i < select.options.length; i ) {
var item = select.options[i] ;
var a = $("")
.css("color", item. style.color)
.addClass(item.className)
.html(item.text)
.appendTo(div);
if (i == select.selectedIndex) {
a .addClass("selected");
}
//When the option is clicked, the content of is displayed corresponding to , the

layer is closed, and the event is bubbled to the original
a.click(function () {
var n = $(this).index();
select.selectedIndex = n;
input.val(select.options [n].text);
div.hide();
$(select).change();
});
}
//Here we judge a special class name "noscroll"
//When there are too many options, a scroll bar will appear in the option list by default; but if there is a .noscroll modification, the scroll bar will not appear forcibly
var noscroll = (select.options.length < ; 10 || $(select).hasClass("noscroll"));
if (/msie 6/i.test(window.navigator.userAgent)) {
div.css("height", noscroll ? "auto" : "215px").css("overflow-y", noscroll ? "hidden" : "scroll");
} else {
div.css("max-height", noscroll ? "10000px" : "215px");
}
//Here we determine a special class name "onside"
//If there is .onside modification, the pop-up option layer will be on the side, otherwise It is below
//Note: The two functions locateBeside and locateBelow used here are methods in my js library. I will give them later
$(select).hasClass("onside")
? div.locateBeside(this, -2)
: div.locateBelow(this, -4);
//Make some smart adjustments for things like repeatedly clicking
if ( window.activeDummySelect == select) {
div.slideToggle(100);
} else {
div.hide().slideDown(100);
window.activeDummySelect = select;
}
//When there is a scroll bar, we need to scroll the scroll bar to the position of the currently selected item
if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height ()) {
div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight);
}
});
});
// Finally, don’t forget: when clicking on free areas on the web page, you should hide

$(document).click(function (e) {
if (!$(e.target).is (".dummy") && !$(e.target).is("#dummydata")) {
$("#dummydata").hide();
}
});
}
});

The above code says that two methods are used: locateBeside and locateBelow, which are extensions of jQuery in my js library. By the way, I will give you two more methods, locate and locateCenter
:-) The code is as follows:

Copy code The code is as follows:

$.fn.extend({
locate: function (x, y ) {
if (this.css("position") == "fixed") {
y -= $(document).scrollTop();
}
return this.css({ left: x, top: y });
},
locateBeside: function (el, adjustX) {
var p = $(el).offset(),
w1 = $(el ).outerWidth(),
w2 = this.outerWidth(),
h2 = this.outerHeight(),
x = p.left w1 5 (adjustX || 0),
y = p.top;
if ($(document).width() < x w2) {
x = p.left - w2 - 5 - (adjustX || 0);
}
if ($(document).height() < y h2) {
y = p.top - (y h2 15 - $(document).height());
}
return this. locate(x, y);
},
locateBelow: function (el, adjustY) {
var p = $(el).offset();
return this.locate(p.left , p.top $(el).outerHeight() 3 (adjustY || 0));
},
locateCenter: function () {
return this.locate(
($(window ).width() - this.width()) / 2,
($(window).height() - this.height()) / 2 $(document).scrollTop()
);
}
});

Finally, some examples of style sheet definitions and demonstration effects are given:

Copy code The code is as follows:

input.dummy { background-image: url(/static/images/combo.gif); background-position: right 12px; background-repeat : no-repeat; cursor: pointer !important; }
input.dummy:hover, input.dummy:focus { background-image: url(/static/images/combo_hover.gif); }
#dummydata { position: absolute; z-index: 20; border: 1px solid #a4601e; background-color: #393939; max-height: 200px; overflow: auto; }
#dummydata a { display: block; color: #ddd ; line-height: 25px; text-indent: 3px; text-overflow: ellipsis; }
#dummydata a:hover { color: #198cef; text-decoration: none; }
#dummydata.matrix { width : 208px; padding: 5px; } /* matrix effect*/
#dummydata.matrix a { float: left; width: 33%; }
#dummydata.matrix-large { width: 640px; padding: 5px ; } /* matrix-large effect*/
#dummydata.matrix-large a { float: left; width: 25%; }
#dummydata a.fullwidth { float: none; }
#dummydata a.delimiter { float: none; width: 100%; height: 10px; visibility: hidden; }
#dummydata a.selected { color: yellow; }

The effect of the above style definition Picture

What you need to do in html is just to add a few class modifications

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7337

9

Java Tutorial

1627

14

CakePHP Tutorial

1352

46

Laravel Tutorial

1265

25

PHP Tutorial

1209

29

Show More

Related knowledge

PyCharm Beginner's Guide: Comprehensive understanding of plug-in installation! Feb 25, 2024 pm 11:57 PM

PyCharm is a powerful and popular Python integrated development environment (IDE) that provides a wealth of functions and tools so that developers can write code more efficiently. The plug-in mechanism of PyCharm is a powerful tool for extending its functions. By installing different plug-ins, various functions and customized features can be added to PyCharm. Therefore, it is crucial for newbies to PyCharm to understand and be proficient in installing plug-ins. This article will give you a detailed introduction to the complete installation of PyCharm plug-in.

Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

What is the Chrome plug-in extension installation directory? Mar 08, 2024 am 08:55 AM

What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User

Share three solutions to why Edge browser does not support this plug-in Mar 13, 2024 pm 04:34 PM

When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.

Does PyCharm Community Edition support enough plugins? Feb 20, 2024 pm 04:42 PM

Does PyCharm Community Edition support enough plugins? Need specific code examples As the Python language becomes more and more widely used in the field of software development, PyCharm, as a professional Python integrated development environment (IDE), is favored by developers. PyCharm is divided into two versions: professional version and community version. The community version is provided for free, but its plug-in support is limited compared to the professional version. So the question is, does PyCharm Community Edition support enough plug-ins? This article will use specific code examples to

Where is the pycharm plug-in? Dec 04, 2023 pm 03:39 PM

Installation steps: 1. Open PyCharm and click the "File" option in the top menu bar; 2. Select "Settings"; 3. In the settings window, select the "Plugins" option; 4. Click the "Browse repositories..." button. You will see all available plug-ins; 5. Enter the name of the plug-in you want to install in the search box, and then click the "Search button"; 6. Find the plug-in you want to install, and click the "Install" button to the right of the plug-in name; 7 , restart after the installation is complete.

How to install plug-ins in pycharm Dec 08, 2023 pm 02:36 PM

Installation steps: 1. Open PyCharm and enter the "File" option in the menu bar; 2. Select "Settings" or use the shortcut keys Ctrl + Alt + S to open the settings window; 3. Select the "Plugins" option; 4. Search for You can also select installed plug-ins for management; 5. To install a new plug-in, click the "Browse repositories" button in the upper right corner of the page; 6. After finding the plug-in you want to install, click the "Install" button to install it.

PyCharm plug-in installation tips are shared to help you get twice the result with half the effort! Feb 21, 2024 pm 06:36 PM

PyCharm is a powerful Python integrated development environment. By installing plug-ins, you can further improve development efficiency and facilitate developers' work. This article will share some tips on PyCharm plug-in installation, so that you can get twice the result with half the effort, while also providing specific code examples to demonstrate how to use the plug-in. Step 1: Open PyCharm, click "File" in the menu bar, and then select "Settings". Step 2: In the Settings window, click "

See all articles