trushka

Вариант 1: background-origin: padding-box
Вариант 2: делаешь обводку с помощью box-shadow: 0 0 0 10px rgba(...)
Сеточку можно linear-gradient'ами, типа

background:
 linear-gradient(to left, #000, #000 1px, transparent 1px) center/10px 10px repeat,
 linear-gradient(to top, #000, #000 1px, transparent 1px) center/10px 10px repeat #aaa

a:active+ul {...}

А в чём проблема нарисовать в том же инкскейпе? 2 круга, прямоугольник и 2 трапеции (polygon) - расширения от прямоугольника к кругам. А вообще, у дизайнера в формате svg попросить - вроде уже даже фотошоп такие фигурки так сохранять умеет

Хотя, можно и на css, даже одним элементом: собственно, прямоугольничек в центре - сам элемент, с background-origin: content-box и толстыми border-left и border-right и прозрачным border-top (расширяющиеся прямые участки по бокам), а закругления - скруглённые квадратные ::before и ::after

Ещё вот так можно извратиться..
https://jsfiddle.net/trushka/k6ft6yac/3/

Хотя, щac подумал, лучше градиентами, вот так примерно, хотя, тут всё равно разная толщина косых "бордеров" получается в хроме и FF.. Хотя, есл 3px сделать - уже получше будет..

Надо не $('.file_upload').click(function() {.., а $('.file_upload').one('click', function() {...
Чтоб клик только один раз сработал после каждого change

Можно использовать ::before и ::after с абсолютным позиционированием, z-index: -1 и transform

a::before {transform: rotateY(20deg)} /*трапеция*/
a::after{transform: rotate(45deg); border: 1px dotted #fff} /*стрелочка*/

Ну, естественно, их надо правильно расположить, задать нужные размеры и perspective самому элементу

Делайте обводку через box-shadow: inset - тогда точно таких глюков не должно быть

PHP пусть возвращает не json, а банальный html - используйте тот же код, что {*Показываем каждую запись*}. А потом вставляете в таблицу$('#displayRecords').append(data) Только dataType: 'json' в запросе указовать тогда не нужно

Может, там какой-то древний браузер, не понимающий vw? Вот в android 4.1, например, такой.. Но если всё же понимает, то можно так

html {width: 100vw; height: 100vh; overflow: hidden}
body: {
    width: 100vh; height: 100vw;
    margin: 50vh auto;  overflow: auto;
    transform: translateY(-50%) rotate(90deg)
}

Если таки не понимает vw vh, то тогда надо в css везде на % поменять, а размеры для body задать скриптом

document.body.style.height=window.innerWidth+'px';
document.body.style.width=window.innerHeight+'px';

можно onload отловить, но он сработает, даже если будет неправильные данные и он покажет форму входа

Так и делайте на css, с помощью hover и transition.

Можно с помощью 3D-трансформаций: типа квадратный блок, снизу - перпендикулярный ему блок со скруглёнными углами (круглый). Всё это наклонено слегка назад.. Вернее, чтоб проще с бордерами было, то лучше назад на угол φ, а круглые блоки у основания - на угол 90°+2*φ

Может, попробовать
html, body {width:100vw; height: 100vh}

$(function(){
  var imgHead = [
    '../images/big_img_top1.jpg',
    '../images/big_img_top2.jpg',
    '../images/big_img_top3.jpg'
  ], el =$('.first_image_normalize'), i=0;
  $.each(imgHead, function(i,val){
    el.prepend('<img src="'+val+'" class="bg hidden" onload="$(this).removeClass(\'hidden\')">')
  });
  var bg =$('.bg', el);
  setInterval(function(){
    bg.removeClass('visible').eq(i).addClass('visible');
    i=(i+1)%imgHead.length
  },4000);

.first_image_normalize {position: relative}
.first_image_normalize .bg {position: absolute; width:100%; height: 100%; transition: .3s linear; opacity:0; visibility: hidden; /*z-index: -1*/}
.first_image_normalize .bg.visible:not(.hidden) {opacity:1; visibility: visible}

Можно блоку с контентом банально задать owerflow: auto, и просто отлавливать событие scroll на нём. Скрыть полосу прокрутки можно поместив блок в другой, фиксированной ширины, но с owerflow: hidden, а внутреннему задать float: left, например, и растянуть с помощью ::before с заданной шириной