| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > PHP: Тексты > Сделать активным поле ввода текста input[type=text |
| Автор: Ron1212 6.5.2017, 11:30 |
| Здравствуйте. Нужна такая помощь: У меня на странице сайта имеется фоновая интерактивная заставка (скрипт "паралакс") с прозрачностью этого "слоя" opacity: 0.3; , перед ним расположена таблица, где в нескольких ячейках находится поле ввода текста (тоже скрипт), после которого расположена кнопка перехода на адрес, указанный в текстовом поле. Все нормально работает, только вот я не могу ввести в текстовое поле никакие символы, т.к. фон является первым (полупрозрачным) слоем, и блокирует ввод символов. Я не могу подобрать правильный синтаксис команды для z-index в скрипте, пробовал назначить отдельно текстовое поле input[type=text] верхним слоем (#input { z-index: 9999; }), но что то не выходит, хотя для div.wrapper оно нормально назначается. Ниже приведу фрагмент скрипта на странице, может поможете подобрать правильную команду для input[type=text], что бы оно было редактируемым. * Не предлагайте назначить верхним слоем div.wrapper, после чего текст конечно спокойно вводится, но только вот все интерактивные свойства фоновой заставки, сразу перестают работать. <style> #input { z-index: 9999; } * { border: 0; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div.wrapper { width: 500px; height: 260px; margin: 0 auto; padding: 0px; border-radius: 10px; background: -moz-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -ms-lznear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -o-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -webkit-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: linear-gradient(top, #387ECF 0%, #A3CAE8 100%); color: #fff; box-shadow: 5px 7px 12px #0298F8; overflow: auto; } input[type=text] { padding: 3px; margin: 0px; border-radius: 20px 20px 20px 3px; box-shadow: 0px 0px 3px #000 inset; font-weight: bold; font-style: normal; font-size: 14px; background: -moz-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -ms-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -o-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -webkit-linear-gradient(top, #fff 0%, #A3CAE8 100%); background: linear-gradient(top, #387ECF 0%, #A3CAE8 100%); color: #111; } input[type=text]:hover { box-shadow: 5px 7px 12px #000, 0px 0px 3px #fff; } input[type=button] { padding: 3px; margin: 0px; border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 3px #000 inset; font-weight: bold; font-style: normal; font-size: 14px; background: -moz-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -ms-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -o-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: -webkit-linear-gradient(top, #387ECF 0%, #A3CAE8 100%); background: linear-gradient(top, #387ECF 0%, #A3CAE8 100%); color: #fff; } input[type=button]:hover { box-shadow: 5px 7px 12px #000, 0px 0px 3px #111; } </style> |