0xD34F

Есть linear-gradient, но там плавный переход цветов...

не обязательно:

linear-gradient(to right, white 0%, white 33%, blue 33%, blue 66%, red 66%, red 100%)

Разная ширина border'а в нормальном состоянии и при hover'е.

Потому что клик на лейбл вызывает клик на инпуте (так лейблы устроены, могут вызывать клик на других элементах), а так как инпут находится внутри лейбла, событие при всплытии заставляет обработчик клика сработать ещё раз.

Какие есть варианты исправить ситуацию:

1. Вешайте обработчик клика на инпут вместо лейбла
   
2. Проверяйте целевой элемент, если не инпут - ничего делать не надо
   
3. Обрабатывайте вместо click событие change
   

Когда показывается второй блок, ховер с первого уходит - значит, второй блок надо скрыть, и первый снова показать. Сразу же случается ховер у первого блока - он скрывается, второй показывается. Ховер уходит на второй блок - надо его скрыть, первый показать... Показывать второй блок надо не только при ховере на первом, но и при ховере на самом себе. А чтобы второй блок не съезжал, когда первый снова станет видимым, используем абсолютное позиционирование. Типа так.

https://jsfiddle.net/t4oc6kd3/

А где же td? В таблице кроме строк должны быть и ячейки.

Значения атрибутов for не соответствуют id радиокнопок. Соответственно, кнопки и не кликаются.

https://jsfiddle.net/jrmocby8/

href должен быть разным

Указывайте nth-child и для родительского блока. Типа так.

UPD. Ну и ещё посмотрите в сторону использования препроцессоров - у вас тут получается много дублирующегося кода, можно же всё сократить.

Никакую ширину под контент подстраивать не надо. Расположите элементы в обратном порядке - тогда заработает селектор .myLink:hover ~ .marker, а чтобы они отображались по-старому, можно использовать flex. Как-то так.

Добавьте атрибут disabled тем полям, значения которые получать не хотите.

const obj = eval(`(${document.querySelector('.link').dataset.test})`);

Или, чтобы можно было JSON.parse использовать, пишите в атрибут корректный json, надо заменить одинарные кавычки на двойные, а само значение атрибута в одинарных писать:

data-test='{"test1": "1", "test2": "2", "test3": "903", "test4": "4"}'

В чем ошибка?

В том, что вы почему-то решили не разбираться, как именно работает используемый вами инструмент.

Поменяйте input и span местами - будет работать как вам нужно.

Дело в том, что если в форме присутствует всего одно поле ввода, то, согласно спецификации, нажатие enter'а должно приводить к отправке формы:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

Что делать? Блокировать действие по умолчанию при нажатии enter'а, добавить input'у @keypress.enter.prevent.

Из-за элемента label - при клике по нему инициируется событие клика на связанном элементе. Вместо клика у label'а обрабатывайте change у input'а.

<div class="container">
  <div class="yellow"></div>
  <textarea></textarea>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

textarea {
  background: #47f;
  line-height: 20px;
  resize: none;
}

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  const maxHeight = 300;
  const height = 20 * this.value.split('\n').length;
  this.style.height = `${Math.min(height, maxHeight)}px`;
});

textarea.dispatchEvent(new Event('input'));

.aimg:nth-child(odd) {
  float: right;
}

.aimg:nth-child(even) {
  float: left;
}

Но ведь каждый .aimg лежит внутри .aboutus_item. Наверное, имелось в виду

.aboutus_item:nth-child(odd) .aimg {
  float: right;
}

.aboutus_item:nth-child(even) .aimg {
  float: left;
}