SO-677458524

by David Thomas

HTML

<ul>
  <li><label><input type="radio" name="test1" value="1"><span>option 1</span></label></li>
  <li><label><input type="radio" name="test1" value="2"><span>option 2</span></label></li>
  <li><label><input type="radio" name="test1" value="3"><span>option 3</span></label></li>
</ul>

<ol>
  <li><label><input type="radio" name="test2" value="1"><span>option 1</span></label></li>
  <li><label><input type="radio" name="test2" value="2"><span>option 2</span></label></li>
  <li><label><input type="radio" name="test2" value="3"><span>option 3</span></label></li>
</ol>

CSS

*, ::before,::after {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.5em;
}

ul, ol, li {
  list-style-type: none;
}
ul, ol {
  border: 1px solid #000;
  flex: 1 0 auto;
}
label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

span {
  color: inherit;
}

li {
  color: #000;
  padding: 0.25em;
  padding-left: 1em;
}

li.hasChanged {
  background: linear-gradient(90deg, #0f06, transparent);
  color: lime;
}

JavaScript

document.querySelectorAll('li').forEach(
  (li) => li.addEventListener('change', (e) => {
  	e.currentTarget.closest('ul, ol').querySelectorAll('li').forEach(
    	(el) => el.classList.toggle('hasChanged', el === e.currentTarget)
    )
  })
);