Как создать переключатель в теге div только с CSS

Question

У меня есть тег HTML, как показано ниже:

<div id="x_G" class="editor-group-x">
     editor-group-x<br />
     <div id="x_L" class="editor-label-x ">
            editor-label-x
     </div>
     <div id="x_F" class="editor-field-x ">
            editor-field-x
     </div>
</div>

Я должен присвоить этому тегу стиль с CSS без каких-либо изменений в тегах HTML, чтобы сделать переключатель в теге div с id = "x_F" , как на картинке ниже. Id = "x_F" должен быть преобразован в переключатель. Как я могу сделать это только с CSS?

Самое важное, что эта работа должна выполняться без добавления какого-либо элемента в * Теги 1021 * или любые прямые изменения в тегах HTML, и все изменения должны быть сделаны с помощью CSS! Любая помощь будет оценена!

Answer 1

Вы не можете сделать это с CSS, но вы можете использовать javascript: (добавить это в нижний колонтитул)

<script>
var div = document.getElementById('x_F');
div.innerHTML += '<div class="form-group">Add your radio button HTML here</div>';
</script>

Или jQuery: (добавить это после вашего jQuery.js)

jQuery( document ).ready(function() {
  var div = $('#x_f');
  div.append('<div class="form-group">Add your radio button HTML here</div>');
});