【javascript】js 美化单选，多选和下拉框

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量160 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yjzhu/archive/2012/12/06/2805441.html
版权

这是以前收藏的用 js 实现美化单选，多选和下拉框的效果。

先上效果图：

Html代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>checkbox and radio and select</title>
    <style type="text/css">
    body{font:0.8em arial,sans-serif;}
    .checkbox,.radio{width:19px;height:25px;padding-right:5px;background:url(checkbox.gif) no-repeat;float:left;}
    .radio{background:url(radio.gif) no-repeat;}
    .select{position:absolute;width:158px;height:21px;padding:0 24px 0 8px;color:white;font:12px/21px arial,sans-serif;background:url(select.gif) no-repeat;overflow:hidden;}
    </style>
</head>
<body>
    <h1>Checkbox</h1>
    <p><input type="checkbox" name="checked" id="checked" class="styled"/><label for="checked">Checked</label></p>
    <h1>Radio</h1>
    <p><input type="radio" name="radio" id="yes" class="styled"/><label for="yes">Yes</label></p>
    <p><input type="radio" name="radio" id="no" class="styled"/><label for="no">No</label></p>
    <h1>Select</h1>
    <select class="styled" name="who">
        <option selected="selected">Who</option>
        <option>What</option>
        <option>When</option>
        <option>Where</option>
        <option>How</option>
    </select>
</body>
</html>
<script type="text/javascript" src="custom-form-elements.js"></script>

custom-form-elements.js代码：

View Code 
/*
CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.
*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
    init: function() {
        var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
        for(a = 0; a < inputs.length; a++) {
            if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
                span[a] = document.createElement("span");
                span[a].className = inputs[a].type;

                if(inputs[a].checked == true) {
                    if(inputs[a].type == "checkbox") {
                        position = "0 -" + (checkboxHeight*2) + "px";
                        span[a].style.backgroundPosition = position;
                    } else {
                        position = "0 -" + (radioHeight*2) + "px";
                        span[a].style.backgroundPosition = position;
                    }
                }
                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                inputs[a].onchange = Custom.clear;
                if(!inputs[a].getAttribute("disabled")) {
                    span[a].onmousedown = Custom.pushed;
                    span[a].onmouseup = Custom.check;
                } else {
                    span[a].className = span[a].className += " disabled";
                }
            }
        }
        inputs = document.getElementsByTagName("select");
        for(a = 0; a < inputs.length; a++) {
            if(inputs[a].className == "styled") {
                option = inputs[a].getElementsByTagName("option");
                active = option[0].childNodes[0].nodeValue;
                textnode = document.createTextNode(active);
                for(b = 0; b < option.length; b++) {
                    if(option[b].selected == true) {
                        textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                    }
                }
                span[a] = document.createElement("span");
                span[a].className = "select";
                span[a].id = "select" + inputs[a].name;
                span[a].appendChild(textnode);
                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                if(!inputs[a].getAttribute("disabled")) {
                    inputs[a].onchange = Custom.choose;
                } else {
                    inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
                }
            }
        }
        document.onmouseup = Custom.clear;
    },
    pushed: function() {
        element = this.nextSibling;
        if(element.checked == true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
        } else if(element.checked == true && element.type == "radio") {
            this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
        } else if(element.checked != true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
        } else {
            this.style.backgroundPosition = "0 -" + radioHeight + "px";
        }
    },
    check: function() {
        element = this.nextSibling;
        if(element.checked == true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 0";
            element.checked = false;
        } else {
            if(element.type == "checkbox") {
                this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
            } else {
                this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                group = this.nextSibling.name;
                inputs = document.getElementsByTagName("input");
                for(a = 0; a < inputs.length; a++) {
                    if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                        inputs[a].previousSibling.style.backgroundPosition = "0 0";
                    }
                }
            }
            element.checked = true;
        }
    },
    clear: function() {
        inputs = document.getElementsByTagName("input");
        for(var b = 0; b < inputs.length; b++) {
            if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
            } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 0";
            } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
            } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 0";
            }
        }
    },
    choose: function() {
        option = this.getElementsByTagName("option");
        for(d = 0; d < option.length; d++) {
            if(option[d].selected == true) {
                document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
            }
        }
    }
}
window.onload = Custom.init;

 

PS：下拉框的效果在 ie6 下不兼容。附上下载地址。

转载于:https://www.cnblogs.com/yjzhu/archive/2012/12/06/2805441.html

dengrongshou5105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-图片加边框
xiaobai12123的博客
12-08 6974
找到页面的所有图片，为他们加一个边框，样式随意 效果图 点击’选中图片’加边框，点击’取消图片’取消边框 代码如下： <!DOCTYPE html> <html> <head> <title>图片缩放</title> <script type="text/javascript"> function addborder() {
单选框，复选框，下拉列表的美化
黄沙百战穿金甲，不破楼兰终不还。
09-11 2059
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
jQuery单选多选按钮美化
12-16
原生html的单选按钮和多选框丑的厉害。这边用jquery以及css进行了一次美化，颜色可自行调节
［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
weixin_30548917的博客
10-14 144
图片素材： 最终效果图： <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head><style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Ne...
下拉多选框美化下拉多选框美化下拉多选框美化
03-15
下拉多选框 样式美化 easyUI插件
多个js实现的多选下拉框
06-05
多个js实现的多选下拉框
javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可).zip
11-16
总的来说，这个“javascript 美化单选 多选和下拉框 最好用的树形下拉框组件”是提高网站表单交互性和用户体验的有效工具，尤其适用于需要处理层次结构数据的场景。通过熟练掌握其使用方法，开发者可以快速构建出...
网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可).zip
11-22
首先，我们来探讨JavaScript美化单选按钮和复选框。在网页中，单选按钮和复选框通常用于收集用户的单一或多个选择。然而，原始的HTML元素样式可能并不符合所有设计需求，因此JavaScript可以用来定制这些元素的外观，...
多选和单选下拉框插件select.js
06-01
**标题：“多选和单选下拉框插件select.js”** **描述解析：** 这个插件主要关注的是在Web开发中的用户界面交互元素——下拉框（Dropdown）。通过使用`select.js`，开发者可以方便地实现单选或多选功能，并且能够...
单选框,下拉菜单美化
weixin_30797027的博客
11-22 92
源码下载地址： 转载于:https://www.cnblogs.com/yhl4300/archive/2011/11/22/2258810.html
JS实现单个图片选中美化框
04-07
JS实现单个图片选中美化框是一款经过美化的图片边框，点击图片，会自动关联到相应的单选框上。
非常漂亮的Js图片边框修饰插件附源码示例
05-12
内容索引:脚本资源,Ajax/JavaScript,图片修饰　　非常漂亮的Js图片边框修饰插件，并附有几种常用的示例，像阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果等，通过这个小插件，会使你网页上的图片变得更加漂亮；同时你还可研究一下下列的问题： 　　上下左右四个图片拉伸效果如何实现？ 　　image解决方案：内置image并设置其width和height 　　ie解决方案: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘../images/counter_bg.jpg‘, sizingMeth
html 下拉多选框代码,js实现下拉复选框效果（代码实例）
weixin_31614235的博客
06-03 2234
本章给大家带来用js实现下拉复选框效果(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。先看看效果：下面我们看看代码：HTML代码：HTMLCSSJavaScriptjQueryPHPMySQLJavaC#C++Pyhtoncss代码：div {display: inline-block;}select {min-width: 200px;height: 25px;bor...
10个HTML5美化版复选框和单选框
热门推荐
chelen_jak的专栏
04-02 12万+
转自：http://www.html5tricks.com/10-pretty-checkbox-radiobox.html 单选框Radiobox和复选框checkbox在网页中也十分常见，虽然它没有按钮的交互性强，但是如果能把它们像按钮那样美化一下，那也是非常不错的。本文收集了10个相对比较漂亮的美化版单选框和复选框，希望你会喜欢。 1、CSS3漂亮的自定义Checkbox复选
html select 自定义,自定义下拉框customSelect
weixin_42407739的博客
06-15 526
一个简单的jQuery UI组件美化元素和输入自定义的范围。允许单选、复选。在选择框前出现单选或复选框。 $(document).ready(function () {$('#debug_log').html('Debug log...');function debug(what) {$('#debug_log').append(what + "");}$('#singleSelect, #mul...
单选、多选样式美化
似水流年
04-12 1199
今天空了，特意把常见的单选、多选美化下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框样式</title> <style> *{ margin: 0; padding: 0; } body{ ...
多选框select美化chosen.js的使用
默1451的博客
07-08 1744
一、导入js和css是文件 二、html a 三、js配置 var config = { '.chosen-select' : {}, '.chosen-select-deselect' : {allow_single_deselect:true}, '.chosen-select-no-single' : {disable_search_thres
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
jquery多选下拉框设置单选下拉框
10-08
可以通过以下步骤将多选下拉框设置为单选下拉框： 1. 首先，使用jQuery选择器选中多选下拉框的元素。 2. 使用jQuery的`.removeAttr()`方法移除多选下拉框的`multiple`属性，即将其设置为单选下拉框。 3. 如果需要，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值