RTW

Добавь в .image-news:after

background: rgba(0, 0, 0, 0.0) url(../i/news.png) 50% 120% no-repeat;

Ты про блок с кучей "test"?
Если да, как вариант флексы вешаешь
Вроде

.input-field {
    position: relative;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}
.row {
    height: 100%;
}

Никак, можешь покадрово сохранить каждое состояние кнопки конечно, а так это вообще не веб подход, разве что для прототипирования.

Очень загадочный вопрос. Ну могу предположить смутно что надо.
Просто заводишь инпут только с type="text" и с onkeypress='return event.charCode >= 48 && event.charCode <= 57'
Затем руками добавляешь кнопки в разметку, которые будут так же работать как в number

Кэш почисти

так? https://jsfiddle.net/dw0usw3f/
ось x то смещена была.
либо отдельную переменную заводить, либо вообще не трогать, как тут
z собсвенно ось получается

Я не вижу ничего военного, просто блок выше всех с z-index и пару анимаций на появление

https://autoprefixer.github.io/

Флексами проще сделать, после смены разрешения на @media, меняй flex-direction и другие параметры вроде transform.

-----
А нет я ошибался
https://jordanhollinger.com/2014/01/29/css-gaussia...
Год назад гугл такого не выдавал

Пробуйте -webkit-mask
С ним можно делать четкие границы

---
На лисе есть проблемы 1920 x 1080, на хроме нет

Можно на стандарной html5 валидации сделать
ruseller.com/lessons.php?rub=43&id=2658

Ползунок тоже input type="range" с кастомными стилями
Остальные инпуты тоже стилизуешь CSS

Тысячи их www.jqueryrain.com/demo/jquery-color-picker

overflow-x: scroll;

https://discuss.atom.io/t/announce-the-box-edit-pa...