Тут замес с плейсхолдером. В теге <select> нет плейсхолдера, а по дизайну надо. Берем первое значение типа "Выберите страну" и назначаем его быть плейсхолдером.
Дальше надо написать кусок жаба-скрипта, который проверяет какое значение выбрано на текущий момент. Если это первое, то добавляем класс .input__widget_faked-placeholder. Если выбранно любое другое, то убираем. В этой демке есть пример скрипта. Смотри глобальный скрипт input.js
Высотой можно управлять при помощи атрибута rows. Например, четыре строки:
Блок .label -- это отдельный компонент, так как может встречаться не только с инпутами.
Блок .asterisk -- так же отдельный.
Такого кейса на самом деле не было, но этот элемент нам еще понадобится.
Проставляй атрибут title="" чтобы понятно было почему заблокированно.
Тут важный момент. Тот атрибут disabled что проставляется в тег -- это не то же самое, что и стилевой-версточный disabled. При определенных условиях (например треугольник у селекты делается дополнительным дивом или псевдо-элементом) просто HTML-ного атрибута будет недостаточно. Так что в догонку к атрибуту disabled фигачим параллельно модификтор .input_disabled
Все такие модификаторы (ошибки, блокирование, размер) вешаются на самый старший и оберточный тег, поскольку могут модифицировать еще что-то внутри.