Круга выравнивание этикетки

Question

Попытки поставить зеленый ящик/круг после моей кнопки радио этикетки или непосредственно перед метким. Любой из них будет работать.

<div class="box green" ></div> 
 
<input type="radio" id="radioOne" value="Y"/> <label>Verified Yes</label>

Я знаю, что это должно быть легко с помощью CSS, но если я использую дисплей: встроенный в CSS для радио-кнопки, круги исчезают, за что я могу только поместите круги в строку выше или ниже переключателя.

Answer 1

Попробуйте это:

HTML

<div class="box green"></div> 
<input type="radio" id="radioOne" value="Y"/> 
<label> 
    Verified Yes <div class="box-green"></div> 
</label> 

CSS

.box-green { 
    display:  inline-block; 
    width:   1em; 
    height:  1em; 
    border-radius: 50%; 
    background: #00FF00; 
} 

Answer 2

Использование display: inline-block, как:

.box { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    background: green; 
    border-radius: 50%; 
} 

Посмотрите в рабочем фрагменте коде ниже:

.box { 
 
    display: inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: green; 
 
    border-radius: 50%; 
 
}

<input type="radio" id="radioOne" value="Y"/> <label>Verified Yes <span class="box green"></span></label> 
 
<br> 
 
<input type="radio" id="radioTwo" value="Y"/> <label><span class="box green"></span> Verified Yes</label>

Надеется, что это помогает!

Answer 3

Обычно вы должны предоставить CSS и т.д.

https://jsfiddle.net/3n1n0y05/

Скорее всего, вы просто забывают установить ширину/высоту или содержание

#radioOne + label:before { 
    content: ""; 
    width: 15px; 
    height: 15px; 
    background: red; 
    display: inline-block; 
    border-radius: 50%; 
} 

#radioOne:checked + label:before { 
    background: green; 
}