Как убрать выделение границы на элементе ввода текста

В вашем случае попробуйте:

input.middle:focus {
    outline-width: 0;
}

Или вообще, чтобы повлиять на все основные элементы формы:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

В комментариях Ноа Уитмор предложил пойти еще дальше для поддержки элементов, у которых атрибут contenteditable установлен на true (фактически делая их типом входных элементов). Следующее должно также быть нацелено на них (в браузерах с поддержкой CSS3):

[contenteditable="true"]:focus {
    outline: none;
}

Хотя я бы не рекомендовал это, для полноты картины вы всегда можете отключить контур фокуса на всем следующим образом:

*:focus {
    outline: none;
}

Имейте в виду, что контур фокуса - это функция доступности и удобства использования; он подсказывает пользователю, какой элемент в данный момент находится в фокусе.