微信小程序改變radio 改變大小一以及隱藏選中按鈕 改變選中的背景色


 1 <view class='warp'>
 2   <view class='title'>xxxxxxxx</view>
 3   <view class='warpRadio'>
 4       <!-- color='transparent'選中無色 -->
 5     <radio value=''checked="checked" color='transparent' >A.bbmnlfklk</radio>
 6 
 7   </view>
 8   <view class='warpRadio'>  
 9     <radio value checked="checked"  color='transparent'>B.bbmnlfklk</radio>
10 
11   </view>
12 
13 </view>
html
 1 .warp{
 2   width: 500rpx;
 3   height: 230rpx;
 4   border: 1rpx solid #000;
 5   margin: 30rpx auto;
 6   border-radius: 10rpx;
 7 }
 8 .title{
 9   width: 300rpx;
10   height: 40rpx;
11  
12   margin: auto;
13   text-align: center;
14 }
15 radio .wx-radio-input{
16   /*設置radio大小*/
17   width: 25rpx;
18   height: 25rpx;
19   border: none;/*邊框無展現*/
20   /* border:1rpx solid #000;  */
21  
22 }
23 .warpRadio{
24   width: 300rpx;
25   height: 50rpx;
26   background-color: #539ad9;
27   font-size: 30rpx;
28   margin: 30rpx auto;
29   text-align: center;
30   line-height: 46rpx;
31   color: #fff;
32 }
33  radio .wx-radio-input.wx-radio-input-checked::before{
34   color: transparent;
35   background-color: transparent;/*使背景色無展現*/
36    border-radius: 50%;/* 圓角 */
37    width: 40rpx; /* 選中后對勾大小,不要超過背景的尺寸 */
38    height: 40rpx; /* 選中后對勾大小,不要超過背景的尺寸 */
39    line-height: 40rpx;
40    text-align: center;
41    font-size:30rpx; /* 對勾大小 30rpx */
42  
43   /* color: blue; */
44    /* background-color: transparent; */
45    /* background-color: blue;
46    border: 1px solid #000;*/
47    transform:translate(-50%, -50%) scale(1);
48    -webkit-transform:translate(-50%, -50%) scale(1);
49 } 
css

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM