改变checkbox或audio按钮的样式

最新推荐文章于 2023-08-05 10:29:34 发布
最新推荐文章于 2023-08-05 10:29:34 发布
阅读量1k 收藏
点赞数
分类专栏： Html 文章标签： html checkbox 改变样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzzzzxping/article/details/62046668
版权

改变checkbox或audio按钮的样式

( 我这里用jquery实现)

部分代码可以省略,参考者可以根据自己需求改一下

html代码

<div class="wrap">
        <form action="">
            方案一
            <label for="cbox_1" flag="false" class="cbox cbox_1"></label>
            <input type="hidden" id="cbox_1" value="false"/>
            <br/>
            <br/>
            方案二
            <label for="cbox_2" flag="false" class="cbox cbox_2"></label>
            <input type="hidden" id="cbox_2" value="false"/>
        </form>
    </div>

css样式

.wrap {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            box-sizing: border-box;
            border: 2px solid #000;
            padding: 60px;
        }
        .cbox {
            margin-left: 30px;
            vertical-align: middle;
            height: 28px;
            width: 28px;
            display: inline-block;
            font-size: 15px;
            font-weight: 700;
            line-height:1;
            background-color: #fff;
            border: 4px solid #0294FE !important;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
        }

js代码

$(function(){
            $(".cbox").on("click", function(){
                if($(this).attr("flag")=="false"){
                    $(this).css("background-color","#0294FE");
                    $(this).html("√");
                    $(this).siblings("input").eq(0).val("true");
                    $(this).attr("flag","ture");

                }else {
                    $(this).css("background-color","#fff");
                    $(this).html("");
                    $(this).siblings("input").eq(0).val("false");
                    $(this).attr("flag","false");
                }
                //  判断点击的是哪个按钮
                //  如果点击的是第一个按钮则改变第二个按钮的状态
                //  如果点击的是第二个按钮则改变第一个按钮的状态
                if ($(this).get(0) == $(".cbox_1").get(0)){
                    $(".cbox_2").css("background-color","#fff");
                    $(".cbox_2").html("");
                    $(".cbox_2").siblings("input").eq(0).val("false");
                    $(".cbox_2").attr("flag","false");
                }else {
                    $(".cbox_1").css("background-color","#fff");
                    $(".cbox_1").html("");
                    $(".cbox_1").siblings("input").eq(0).val("false");
                    $(".cbox_1").attr("flag","false");
                }
            });

        })

整体代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变复选框样式</title>
    <style>
        .wrap {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            box-sizing: border-box;
            border: 2px solid #000;
            padding: 60px;
        }
        .cbox {
            margin-left: 30px;
            vertical-align: middle;
            height: 28px;
            width: 28px;
            display: inline-block;
            font-size: 15px;
            font-weight: 700;
            line-height:1;
            background-color: #fff;
            border: 4px solid #0294FE !important;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
        }
    </style>
    <script src="./javascript/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div class="wrap">
        <form action="">
            方案一
            <label for="cbox_1" flag="false" class="cbox cbox_1"></label>
            <input type="hidden" id="cbox_1" value="false"/>
            <br/>
            <br/>
            方案二
            <label for="cbox_2" flag="false" class="cbox cbox_2"></label>
            <input type="hidden" id="cbox_2" value="false"/>
        </form>
    </div>
    <script>
        // checkbox 选择按钮改变
        $(function(){
            $(".cbox").on("click", function(){
                if($(this).attr("flag")=="false"){
                    $(this).css("background-color","#0294FE");
                    $(this).html("√");
                    $(this).siblings("input").eq(0).val("true");
                    $(this).attr("flag","ture");

                }else {
                    $(this).css("background-color","#fff");
                    $(this).html("");
                    $(this).siblings("input").eq(0).val("false");
                    $(this).attr("flag","false");
                }
                //  判断点击的是哪个按钮
                //  如果点击的是第一个按钮则改变第二个按钮的状态
                //  如果点击的是第二个按钮则改变第一个按钮的状态
                if ($(this).get(0) == $(".cbox_1").get(0)){
                    $(".cbox_2").css("background-color","#fff");
                    $(".cbox_2").html("");
                    $(".cbox_2").siblings("input").eq(0).val("false");
                    $(".cbox_2").attr("flag","false");
                }else {
                    $(".cbox_1").css("background-color","#fff");
                    $(".cbox_1").html("");
                    $(".cbox_1").siblings("input").eq(0).val("false");
                    $(".cbox_1").attr("flag","false");
                }
            });

        })

    </script>
</body>
</html>
一本正经的猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
重写 Audio 样式
Jartto's Blog
04-25 1168
众所周知，HTML5 已经可以很好的支持 Audio 和 Vedio 了，我们可以方便的在网页添加多媒体控件。然而，设计师总是与众不同，修改 Audio 默认样式已成常态。本文将围绕如何通过 CSS 来修改 HTML5 的默认样式，撇开 JS 实现方式。当然，后续还会推出一篇文章：打造与众不同的 Audio 播放器，先占个坑吧！ 一、Audio 结构Audio 的用法很简...
微信小程序 modal组件详细介绍
09-01
- `listenerButton`：当用户点击按钮时，调用此方法，通过`setData`改变`hiddenModal`的值来显示或隐藏`modal`。 - `listenerConfirm`和`listenerCancel`：分别处理用户点击确认和取消按钮时的操作，通常会关闭`...
audio标签的样式修改
@宝藏男孩
08-19 5508
由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio， 然后用div之类标签，定义css样式美化起来用来显示播放器的效果，最后用js捕获audio事件，基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关API： 控制函数功能说明 lo
[js开源组件开发]html5标签audio的样式更改
weixin_30718391的博客
01-27 405
html5标签audio的样式更改 由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，所以我简单的把它进行了封装，效果如下: 作为技术实现，它的原理比较简单，就是把原生的audio隐藏，然后用div来显示播放器的效果，然后调用它的click事件来触发play和stop,然后是时长d...
【知识整理】audio样式的重写
Joanna的博客
11-18 1430
as
Html5 audio标签样式的修改
09-28
主要介绍了Html5标签audio的样式修改 ,对html5 audio标签样式相关知识感兴趣的朋友一起学习吧
HTML相应知识点.docx
07-07
3. radio和checkbox：分别用于创建单选按钮和复选框，name属性相同表示一组选项。 4. label：与input配合使用，增强可点击区域，通过for属性关联input。 以上是HTML的一些核心知识点，掌握这些可以让你在前端开发中...
HTML旅游网站设计与实现——东江湖旅游网站6个网页HTML+CSS+JavaScript
08-10
- **DOM操作**：使用JavaScript操作文档对象模型（DOM），改变页面内容、样式或结构，提高页面动态性和交互性。 - **AJAX技术**：通过异步JavaScript和XML技术实现不刷新页面即可更新部分内容，提升用户体验。 ####...
04 Web前端技术.pdf
12-04
其他表单元素如`<input>`有不同的type属性，如text（文本输入）、password（密码输入）、radio（单选按钮）、checkbox（复选框）、select（下拉列表）、file（文件上传）、hidden（隐藏域）、submit（提交按钮）、...
ianschooltask
03-17
7. **表单元素**：HTML中的`<form>`元素用于创建用户输入表单，如文本框`<input type="text">`、按钮`<button>`、复选框`<input type="checkbox">`等，用于收集用户数据。 8. **图像和多媒体**：`<img>`元素用于...
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
vueAudio-customStyle-palyer, 一个audio标签自定义样式的vue组件
自定义美化HTML5 video视频播放器界面样式
07-14
自定义美化HTML5 video视频播放器界面样式，漂亮的HTML5video视频界面
html5 audio demo【修复拖动进度条bug】
07-06
html5 audio自定义样式以及播放控制demo。以前那个有bug，csdn太坑不能删除或者修改，只能重新上传一个了
HTML5自定义网页的checkbox radiobox单选按钮和复选框.rar
07-10
HTML5自定义网页的checkbox radiobox单选按钮和复选框，把单选按钮变成一个点击变色的花朵，把复选框的对勾变成自定义的形状，比默认效果漂亮多了，这里的定义使用了自定义图片。
audio样式设置
weixin_48070278的博客
04-12 2554
/* 喇叭音量背景设置 */ /* audio::-webkit-media-controls-volume-slider{ background-color: red; } */ /* 未知样式 */ /* audio::-webkit-media-controls-seek-back-button{ background-color: red; } */ /* 未知样式 */ /* audio::-webkit-media-controls-seek-f...
DIY audio player - 自定义audio播放器样式
weixin_33923762的博客
09-13 1061
之前也有用到audio，大概是生日贺卡，博客音乐，播放语音等场景。场景也比较简单，一个按钮加一点动画，再用上Audio的API，基本上就可以搞定了。哦，可能还会涉及到自动播放。【这里】 DIY 以上场景，我们一般都看不到Audio的样式，基本都被隐藏了。因为对于新时代的我们来说，暂时还没有get它的美。 但是，我们要控制音频的播放，直观的...
解决audio标签样式问题及ios自动播放问题
weixin_30251829的博客
06-23 202
html代码如下，ios的audio标签好像不支持ogg文件播放，在微信端放了ogg音频文件，都无法播放，因此改用MP3文件。 <!-- 音频 --> <audio controls="controls" autoplay="autoplay" id="mp3Btn" style="display: none;"> <source src="resour...
使用 CSS 和 WebKit 属性设置 HTML5 `＜audio＞` 标签的样式
最新发布
我的博客，不一样的自我表达
08-05 3112
虽然标签本身不提供特定的 WebKit 样式属性，但您可以利用标准 CSS 以及特定于 WebKit 的属性来自定义音频播放器的外观，以符合您的设计美学。总之，虽然 HTML5标签不提供专用的 WebKit 样式属性，但您可以使用标准 CSS 以及各种特定于 WebKit 的选择器为音频播放器实现自定义且精美的外观。尝试不同的样式和属性来创建与您的网站设计无缝集成的音频播放器。-webkit-media-controls-volume-slider-container：设置音量滑块容器的样式。
audio自定义样式，控制操作面板的暂停，播放，获取音频的时长，以及根据时长进行进度条展示
cristina_song的博客
10-12 5602
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;audio实例&lt;/title&gt; &lt;script src="./js/jquery-1.9.1.min.js"&gt;&lt;/sc
checkbox 显示成按钮样式
05-14
可以使用 CSS 来将 checkbox 显示成按钮样式。以下是一个例子： ```html <label class="checkbox-button"> <input type="checkbox"> Checkbox ``` ```css .checkbox-button { display: inline-block; border:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值