html按钮坐标,html-单选按钮位置CSS

尝试了一些交换.我直到此为止：

.radio {

margin: 0.1rem;

margin-left: 2.5rem;

margin-top:

}

.radio input[type="radio"] {

position: relative;

opacity: 0;

}

.radio input[type="radio"] + .radio-label:before {

content: '';

background: #f4f4f4;

border-radius: 100%;

border: 1px solid #b4b4b4;

display: inline-block;

width: 0.9em;

height: 0.9em;

position: relative;

/* position */

margin-right: 1em;

margin-top: -2px;

vertical-align: middle;

cursor: pointer;

text-align: center;

transition: all 250ms ease;

}

.radio input[type="radio"]:checked + .radio-label:before {

background-color: #3197EE;

box-shadow: inset 0 0 0 4px #f4f4f4;

}

.radio input[type="radio"]:focus + .radio-label:before {

outline: none;

border-color: #3197EE;

}

.radio input[type="radio"]:disabled + .radio-label:before {

box-shadow: inset 0 0 0 4px #f4f4f4;

border-color: #b4b4b4;

background: #b4b4b4;

}

.radio input[type="radio"] + .radio-label:empty:before {

margin-right: 0;

}

Sex *

Male

Female

预习

变化

CSS的变化：