冰块上的猫 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 关于推送项目到github的问题
  • ¥15 急!C++指针编写相关的问题
  • ¥30 用python写一个多签情况下波场的代理资源和回收资源
  • ¥15 怎么在matlab中输出显示泵的流量-扬程和管路损失与流量均在一个表格里
  • ¥15 matlab学期例题代码答疑
  • ¥50 Hadoop:好友推荐
  • ¥15 在线手电筒追加按钮JS
  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?