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 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 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 = p.left - w2 - 5 - (adjustX || 0);
}
if ($(document).height() 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