css多选 单选自定义

-webkit-appearance: none;   用于消失原生  改变按钮和其他控件的外观，使其类似于原生控件。

-webkit-transform: rotate(45deg); transform: rotate(45deg); 旋转45度

：before 必须有这一项，否则不显示

圆形：

1. position: relative;
2. width: 21px;
3. height: 21px;
4. border-width: 1px;
5. border-style: solid;
6. border-radius: 50%;
7. border-color: #c8c7cc;
8. background-color: #fff;

对号：

1. position: absolute;
2. top: 4px;
3. left: 7px;
4. width: 5px;
5. height: 12px;
6. border-width: 2px;
7. border-top-width: 0;
8. border-left-width: 0;
9. border-style: solid;
10. border-color: #488aff;
11. -webkit-transform: rotate(45deg);
12. transform: rotate(45deg);

 选中：

1. border-color: #488aff;
2. background-color: #488aff;
3. position: relative;
4. width: 21px;
5. height: 21px;
6. border-width: 1px;
7. border-style: solid;
8. border-radius: 50%;
9. border-color: #c8c7cc;
10. background-color: #fff;

1. position: absolute;
2. top: 4px;
3. left: 7px;
4. width: 4px;
5. height: 9px;
6. border-width: 1px;
7. border-top-width: 0;
8. border-left-width: 0;
9. border-style: solid;
10. border-color: #fff;
11. -webkit-transform: rotate(45deg);
12. transform: rotate(45deg);

以上是纯传统方式不借助框架字体，但是不能自动跟随点击动作

以下是利用before 及 自带字体 content: "\f1f6";  以ionic2 为例

<ion-item class="radio1">
          <ion-label fixed>简洁单选</ion-label>
          <ion-note item-end>
            <input name="radio1" type="radio" checked/><span >男</span>
            <input name="radio1" type="radio" /><span class="gril">女</span>
          </ion-note>
      </ion-item>

.radio1 .input-wrapper{
        flex: 0 0 118px;
    }
    .radio1 input{  
        font-family: "Ionicons";
        -webkit-appearance: none;
        font-size: 24px;
        margin-right: 5px;
        vertical-align: middle;
    }
    .radio1 input[type=radio]:checked:before {
        content: "\f149";
        color: #488aff;
    }
    .radio1 input[type=radio]:before {
        content: "\f1f6";
    }
    .radio1 span{
        margin-right: 45px;
    }

 

转载于:https://my.oschina.net/u/3427060/blog/1559919