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 oneselects.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
