マークの美化を選択 -- JS プラグイン、post-loading_form エフェクト

タグの外観は、ブラウザごとに一貫性がなく、CSS で変更することはできません。

ここでは私の美化方法を共有します

。
利点: を引き続き使用し、外観を変更するだけで、フォームの動作は変更または干渉せず、後で JS を読み込みます。 (注: このスクリプトは jQuery に依存しています)

何も言うことはありません。すべてはコード内にあります。
レンダリングは一番下にあります。

コードをコピー コードは次のとおりです:

$(document).ready(function () {

    // 找出需要美化的

标记，我们用一个class名称 "beautify" 来确定，没有这个样式的则将被忽略
    var selects = $("select.beautify");
    if (selects.length > 0) {

        //先在代码底部增加一个

，用来承载和显示下拉框选项
        $("body").append("

");

        //挨个美化呗
        selects.each(function () {

            //给本函数下的 this (也就是

) 设置一个别名，在下面的匿名函数中将会被用到
            var select = this;

            //创建一个 ，  .dummy 将用于我们对此类 进行专门样式定义
            //同时将 的部分属性和样式复制给这个 dummy input
            //创建完后，将这个 插入 dom， 紧跟原
            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);

            //将 藏掉，不要在 .beautify 中去定义 display:none， 因为js加载失败时，我们还得用上它
            this.style.display = "none";

            // 当

被点击时
            input.click(function () {
                //调出前面创建的