JavaScript

document.addEventListener('DOMContentLoaded', function() {
	let inputBlocks = document.querySelectorAll('.offer-select .form-position-checker');
    
    let spanCbx = `<span class="new-cbx"></span>`;
    
    inputBlocks.forEach(el => {
    	el.insertAdjacentHTML('beforeend', spanCbx);
    })
})





CSS:

.form-position-input {
	display: none;
}

/* Радиокнопки */

/*.new-cbx {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	margin-right: 20px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px coral;
}

.form-position-input:checked + .new-cbx {
	background: coral;
}*/



.form-position {
	display: flex;
	align-items: center;
}


/* Чекбоксы */
.new-cbx {
  position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    transition: .5s;
}

.new-cbx:before {
  content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #000;
    box-shadow: 0 -27px 0 #000;
    transition: .5s;
}

.new-cbx:after {
  content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 100%;
    background: #000;
    box-shadow: 27px 0 0 #000;
    transition: .5s;
}

.form-position-input:checked + .new-cbx {
  transform: rotate(-45deg) translate(10px, -9px);
}

.form-position-input:checked + .new-cbx:before {
  background: #0f0;
    box-shadow: 0 0 0 transparent;
}

.form-position-input:checked + .new-cbx:after {
  height: 50%;
    background: #0f0;
    box-shadow: 0 0 0 transparent;
}