html - заменить входное радио текстом

Question

Я хотел бы заменить «входное радио» текстом и изменить его цвет при выборе.

Цвет по умолчанию - белый #FFFFFF, но при нажатии он меняется на # 627CA9, но без видимого 'radio input'.

Я бы хотел, чтобы круг 'input radio' стал 'display: none', но сохранил текст, который, когда пользователь нажимает, меняет цвет, давая представление о том, что 'input радио "нажали

Я не знаю, удастся ли это сделать! Заранее спасибо за вашу помощь! (Извините, мой английский sh)

<label><input type="radio" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>

Answer 1

Я думаю, что это может помочь, просто нужен дополнительный диапазон:

<label>
  <input type="radio" name="poll_option" class="poll_option"value="CHVRCHES">
  <span>CHVRCHES</span>
</label>

и

.label input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.label input[type="radio"]:checked+span {
  color: #627CA9;
}

Answer 2

Это то, что вы хотите? Я использовал jQuery, чтобы скрыть переключатель и изменить цвет ярлыка при нажатии переключателя.

function changeInput(input) {
  $(input).hide();
  $(input).parent().css('color', '#627CA9');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label><input type="radio" onclick="changeInput(this);" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>

Если вы хотите, чтобы радио-кнопка скрывалась с самого начала:

$(function() {
  $('.poll_option').hide();
});

function changeInput(input) {
  $(input).parent().css('color', '#627CA9');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label><input type="radio" onclick="changeInput(this);" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>