Alipay small developers - to modify the native small applet program to develop micro-channel radio default style - a small program to modify the native checkbox, radio default style

Below, this radio button, a small program to do native radio button is still relatively easy to use, so select direct style transformation:

For small micro-channel program, the radio button is essentially a component with its own internal structure, the internal structure has its own elements, so the re-define the style of the time, need to use your internal component elements of the class name to define, in detail see: micro-channel program to develop small - small program to modify the native checkbox, radio default style .

Different from the small micro-channel program, most of the components and style with Html Alipay applets are relatively close. For radio button, html tags and similar, the same method can be used to modify the style. details as follows:

/ * Radio button styles * / 

Radio { 
  width : 40rpx ; 
  height : 40rpx ; 
  border : 4rpx Solid # 999 ; 
  border-RADIUS : 100% ; 
  background : none ; 
  position : static ; 
  the display : ! Inline-Flex Important ; 
} / * after the selected internal radio button styles * / 
radio-the checked { 
  border : ! # 3cbcee 4rpx Solid Important ; 
} 
radio :: after the checked-



{
  width: 60%;
  height: 60%;
  background: #3cbcee;
  border-radius: 100%;
  content: '';
  margin: auto;
}

radio.disabled {
  border: 4rpx solid #eee;
  border-radius: 100%;
}

Note:

1. The top of the class name in the Developer Tools debugger can see, in addition to  radio-checked :: after  not capable of such pseudo-class style directly in the editor to adjust, others are possible.

2.radio tag using  inline-flex important;!  Display mode, otherwise good intermediate tone dot centered.