В данном примере будет вызываться popup окно по клику на элемент, которое содержит форму с возможностью прикрепить файл(аттач). Кнопки имеют свой уникальный стиль, при нажатии на аттач для пользователя должно быть понятно что файл подцеплен и видна часть имени, без изменения размеров кнопок.

Основная сложность была в кроссбраузерном решении стилизации кнопки input type=file.

Для красивого отображения выбранного файла сделано пару манипуляций на js. Из пути к файлу на диске убирается сначала все кроме названия файла, потом если название длинное отсекается часть названия заменяя пропущенную часть на ..

$("input:file[id=file-upload]").change(function() {
				str = $(this).val();
				name = str.replace(/^.*(\\|\/|\:)/, '');
				if(name.length > 10) 
				{
					ext = name.split(".").pop().toLowerCase();
					name = name.substr(0,9).toLowerCase() + '...' + ext;
				}
				$("#file-upload-value").html( name );
			})

Рабочий пример можно посмотреть: Demo