Ron2323
Junior Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте.
Нужна такая помощь:
У меня на странице сайта имеется фоновая интерактивная заставка (скрипт "паралакс") с прозрачностью этого "слоя" 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> |
