冰块上的猫 2023-11-20 21:47 采纳率: 90.9%
浏览 10
已结题

如何改变复选框颜色（mui html）

求解答：

mui 如何改变复选框颜色

我的代码：

input[type="checkbox"] {
                background-color: #FF5733;
                color: #FFFFFF;
            }

这个方法试过了，不行

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-11-21 10:16
    关注

    【相关推荐】



    • 这篇文章：手机返回按键的监听（mui html，手机物理键等） 也许能够解决你的问题，你可以看下
    • 除此之外, 这篇博客: HTML应用开发基础篇 - MUI 框架（三）MUI 布局中的 1、MUI 栅格系统 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

      1）、12 列响应栅格系统：父级容器上添加 .mui-row ，列上添加 .mui-col-[ sm | xs ] - [ 1-12 ] 

      简单说明一下：

      <!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/mui.picker.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
	</head>
	<body>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">栅格系统</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
			    <div class="mui-row">
			    	<div class="mui-col-sm-3 mui-col-xs-4"><img src="imgs/cbd.jpg" width="100%"/></div>
			    	<div class="mui-col-sm-3 mui-col-xs-4"><img src="imgs/muwu.jpg" width="100%"/></div>
			    	<div class="mui-col-sm-3 mui-col-xs-4"><img src="imgs/shuijiao.jpg" width="100%"/></div>
			    </div>
		    </div>
		</div>
		<script type="text/javascript">
		</script>
	</body>
</html>

      运行结果是：

      实现一个小例子，效果图为：

      代码如下：

      <!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		
		<style type="text/css">
			.mytb{
				background: white;
			}			
			
			.mytbHeader{
				border-bottom: 1px solid gray;
			}
			a .myIcon{
				font-size: 40px;
			}
			.myrow:nth-of-type(2n+1){
				background: lightblue;
			}
			.myrow:nth-of-type(2n){
				background: yellow;
			}
			.mui-row .mui-col-xs-3:nth-of-type(1) a{
				color: green;
			}
			.mui-row .mui-col-xs-3:nth-of-type(2) a{
				color: blue;
			}
			.mui-row .mui-col-xs-3:nth-of-type(3) a{
				color: orange;
			}
			.mui-row .mui-col-xs-3:nth-of-type(4) a{
				color: black;
			}
			
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <div class="mui-title">标题</div>
		</header>
		<div class="mui-content">
		    <div  class="mui-content-padded mytb">
			   <div class="mui-row mui-h4 mytbHeader" >
			       <div class="mui-col-xs-2 mui-text-center">编号</div>
			       <div class="mui-col-xs-4 mui-text-center">姓名</div>
			       <div class="mui-col-xs-6 mui-text-center">选课信息</div>
			   </div>
			   <div class="mui-row mui-h5 myrow">		   	
			   	   <div class="mui-col-xs-2 mui-text-center">001</div>
			       <div class="mui-col-xs-4 mui-text-center">张三</div>
			       <div class="mui-col-xs-6 mui-text-center mui-ellipsis-2" style="-webkit-line-clamp:3" >H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发</div>		   
			   </div>			  
			  <div class="mui-row mui-h5 myrow">
			       <div class="mui-col-xs-2 mui-text-center">002</div>
			       <div class="mui-col-xs-4 mui-text-center">李四</div>
			       <div class="mui-col-xs-6 mui-text-center ">H5移动应用开发</div>
			   </div>
			   <div class="mui-row mui-h5 myrow">
			       <div class="mui-col-xs-2 mui-text-center">003</div>
			       <div class="mui-col-xs-4 mui-text-center">王五</div>
			       <div class="mui-col-xs-6 mui-text-center">H5移动应用开发</div>
			   </div>
		   </div>
		   
		     <div class="mui-content-padded mytb">
		  	
		  	<div class="mui-row">
			    <div class="mui-col-xs-3 mui-text-center">
			    	<a href="#" ><span class="mui-icon mui-icon-weixin myIcon" ></span>
			    	<h5>微信</h5></a>		
			    </div>
			    <div class="mui-col-xs-3 mui-text-center">
			    	<a href="#" ><span class="mui-icon mui-icon-qq myIcon" ></span>
			    	<h5>QQ</h5></a>		
			    </div>
			     <div class="mui-col-xs-3 mui-text-center">
			    	<a href="#"><span class="mui-icon mui-icon-weibo myIcon" ></span>
			    	<h5>微博</h5></a>		
			    </div>
			    <div class="mui-col-xs-3 mui-text-center">
			    	<a href="#" ><span class="mui-icon mui-icon-settings myIcon"></span>
			    	<h5>设置</h5></a>		
			    </div>
			</div>
		   
		   
		    
		</div>
	</body>

</html>

      2）、九宫格：如

      关键代码为：

      <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
	<span class="mui-icon mui-icon-home"></span>
	<div class="mui-media-body">Home</div>
        </a>
    </li>
</ul>

    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月1日
  • 已采纳回答 11月23日
  • 创建了问题 11月20日

悬赏问题

  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论，网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比，为什么Snetinel-2计算的结果最小值特别小，而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同