Вадим Белкин

Атрибут pattern принимает регулярные выражения. Вам нужно почитать про регулярные выражения, чтобы можно было самому написать регулярки под свои требования.
Либо ищите на подобных ресурсах rgxp.ru, regexlib, regexhub готовые выражения под Ваши требования

Вам нужно растянуть контейнер на весь экран, самый простой вариант это ширина 100%, затем сами слайды так же должны быть на весь экран - так же 100% ширина. А следующий шаг это сделать слайды в одну строку и скрыть те что не умещаются - тут вариантов несколько, можно на флексах с запретом переноса (он по-умолчанию), можно на инлайн блоках с запретом переноса.

Обычно все эти доп.контролы сделаны через псевдоэлементы. В каждом браузере они могут называться по разному и обычно с префиксом данного браузера.
Пример
В хроме и вебкитовых браузерах отключается через псевдоэлемент ::-webkit-clear-button, а для Firefox не знаю к сожалению, вроде как поддержка type="date" в мозиле появилась не так давно, по этому информации о её контролах я не нашел

Пример. Подобный результат нужен?
1. Создаете адаптивную сетку
2. Для картинок добавляете обертку с трюком для пропорциональных размеров через вертикальный padding и располагаете картинку внутри такого блока

Соглашусь с Антон Спирин, тут больше к общему UI/UX, а не просто веб.
Попробуйте почитайте или изучите какие-то дизайн системы, как правило там описаны и аргументированы многие решения по UI/UX. Например, можно почитать документацию к Material Design, сама система сделана довольно таки качественно.

Не пробовал, но возможно какие-то расширения для браузера помогут (типа такого)

Сам, кстати, с подобной проблемой сталкивался и мне помогла сама IDE. Пользуюсь WebStorm, он же при открытии страниц через саму IDE открывает страницы в localhost, не вникал в суть, но видимо сама IDE создает что-то вроде локального сервера (без nodejs, своими силами так сказать). Единственный нюанс, для работы с импортами в настройках нужно включить https://monosnap.com/file/RvlDRly1x2GfEWkeVXBOqFmk... иначе при открытии или обновлении страницы IDE будет запрашивать разрешение на каждый импортируемый ресурс, что очень неудобно

Если нужно именно средствами html для таблиц, то для выравнивания по вертикали в таблицах есть атрибут valign (смотрите поддержку). Это чисто html'ный способ.
Но можно добавить инлайн стили к тегу ячейки vertical-align: middle, отчасти тоже с помощью html :-D, т.к. не нужно подключать стили и делать выборку элемента селекторами

Из-за особенностей дизайна проблематично сделать через стандартное табличное поведение (добавить тени и отступы между строками т.к. элементы с display: table-row не дают такой возможности).
Но в данном случае, если важна семантика и доступность (Web Accessibility), я бы все же использовал table и сопутствующие теги, изменив у них свойства display на block и flex где нужна блочная или горизонтальная раскладка (это позволит добавить тени для tr и отступы между ними).
Естественно все можно сделать так же на div и даже добавить role и aria-* атрибуты если опять же важна доступность.

В любом случае выбор решения зависит от требований к реализации (поведение строк и колонок при изменении контента и изменениях размера таблицы или экрана, необходимость соблюдения семантики и доступности, возможно еще какие-то особенности).
Если у вас достаточно времени для реализации данного UI, то я бы посоветовал попробовать сделать на таблицах, а если будут сложности - всегда можно переделать на блоки.

Если поддержка IE11, то только через svg маски
Тут пара способов для IE подойдет

Видимо в ФФ при наведении на пункты select с блока пропадает hover. Возможно выходом будет привязываться как-то к focus на селект. CSS'ный focus-within возможно поможет или скриптами при фокусе на селект добавлять класс для блока через который селект будет так же виден аналогично ховеру

Вас интересует почему в качестве единиц измерения выбраны проценты или чем flex-basis от width отличается?
1. Процент - относительная единица измерения и позволяет сделать сетку максимально адаптированной к любому контейнеру
2. Про разницу flex-basis и width читайте тут например

https://jsfiddle.net/rpyhosmd/
Учитесь правильно читать селекторы и проверяйте валидность разметки (ul не должен быть в p, хром например его выносит, и ошибка в теге span)