微信小程序:修改radio樣式

 效果


.row_radio{
  position: relative;
  width: 50rpx;
  left: 30rpx;
}
.select{
  transform:scale(0.7);
}
/*
radio{
  margin-left: 40rpx;
}
radio .wx-radio-input{
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  margin-top: -4rpx;
}*/
radio .wx-radio-input.wx-radio-input-checked{
  width: 36rpx;
  height: 36rpx;
  border: 1px solid #8CD241 !important;
  background: rgb(73, 118, 241) !important;
}
radio .wx-radio-input.wx-radio-input-checked::before{
  border-radius: 50%;
  text-align: center;
  color: #8CD241;
  font-size: 30rpx;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}
<view class="row_radio"><radio class="select" ></radio></view>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章