Benutzerdefiniertes Optionsfeld mit css

Question

Ich versuche, den benutzerdefinierten Radio-Button zu erstellen, wie im Bild unten gezeigt.

Ich schrieb den Code und in der Lage die richtige Styling zu erreichen, aber nicht in der Lage das Etikett erscheinen vor den Radio-Buttons zu machen.

.lengend-action-buttons { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
[type="radio"] + span:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: -0.10em; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-right: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 
[type="radio"]:checked + span:before { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
} 
 
[type="radio"]:focus + span::after { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: -0.125em; 
 
}

<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0011day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> 
 
    <span>1 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0017day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> 
 
    <span>7 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00130day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> 
 
    <span>30 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00190day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> 
 
    <span>90 Day</span> 
 
    </label> 
 
</div>

Bitte helfen Sie mir, dieses Problem zu beheben.

Answer 1

Ersetzen before mit after und umgekehrt für span und ja, margin-left mit margin-right:

.lengend-action-buttons { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
[type="radio"] + span:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: -0.10em; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-left: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 
[type="radio"]:checked + span:after { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
} 
 
[type="radio"]:focus + span::before { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: -0.125em; 
 
}

<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0011day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> 
 
    <span>1 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0017day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> 
 
    <span>7 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00130day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> 
 
    <span>30 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00190day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> 
 
    <span>90 Day</span> 
 
    </label> 
 
</div>

Answer 2

ersetzen :before mit :after

zu dem Text Mitte machen gesetzt ausgerichtet vertical-align zu middle

.lengend-action-buttons { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
[type="radio"] + span:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: middle; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-left: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 
[type="radio"]:checked + span:after { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
} 
 
[type="radio"]:focus + span::before { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: middle; 
 
}

<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0011day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> 
 
    <span>1 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0017day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> 
 
    <span>7 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00130day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> 
 
    <span>30 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00190day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> 
 
    <span>90 Day</span> 
 
    </label> 
 
</div>