Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 03.10.2016
Сообщений: 27
1

Сделать активным поле ввода текста input[type=text] в скрипте с интерактивным фоновым слоем

06.05.2017, 11:24. Просмотров 926. Ответов 1
Метки нет (Все метки)

Здравствуйте.
Нужна такая помощь:
У меня на странице сайта имеется фоновая интерактивная заставка (скрипт "паралакс") с прозрачностью этого "слоя" opacity: 0.3; , перед ним расположена таблица, где в нескольких ячейках находится поле ввода текста (тоже скрипт), после которого расположена кнопка перехода на адрес, указанный в текстовом поле. Все нормально работает, только вот я не могу ввести в текстовое поле никакие символы, т.к. фон является первым (полупрозрачным) слоем, и блокирует ввод символов.
Я не могу подобрать правильный синтаксис команды для z-index в скрипте, пробовал назначить отдельно текстовое поле input[type=text] верхним слоем #input { z-index: 9999; }, но что то не выходит, хотя для div.wrapper оно нормально назначается. Ниже приведу фрагмент скрипта на странице, может поможете подобрать правильную команду для input[type=text], что бы оно было редактируемым.

* Не предлагайте назначить верхним слоем div.wrapper, после чего текст конечно спокойно вводится, но только вот все интерактивные свойства фоновой заставки, сразу перестают работать.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#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;
            }
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.05.2017, 11:24
Ответы с готовыми решениями:

HTML!? Есть поле ввода Type text, после ввода текста и нажатия entrer теряется фокус, как его оставить в этом же поле?
HTML!? Есть поле ввода Type text, после ввода текста и нажатия entrer теряется фокус, как его...

Сделать <input type="checkbox"> активным
Всем привет! Подскажите пожалуйста как сделать &lt;input type=&quot;checkbox&quot;&gt; активным, тоесть что бы...

При нажатии на блок сделать активным окно ввода текста
подскажите пожалуйста как сделать чтоб при нажатии на блок становилось активным окно ввода текста

НЕ только числа в поле ввода input type="number"
Есть поле ввода &lt;input type=&quot;number&quot; name=&quot;_appointmentdate&quot; class=&quot;textbox&quot; value=&quot;&quot; /&gt; ...

1
35 / 35 / 11
Регистрация: 17.03.2017
Сообщений: 250
06.05.2017, 19:21 2
cаму форму дайте. Вы хоитет чтобы у вас прозрачность остававалась 0.3 и вы могли писать текст?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.05.2017, 19:21

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

HTML!? Input Type = "text", как сделать чтобы у этого элемента не было границ, и шрифт был жирным???
&lt;INPUT type=&quot;text&quot; id=&quot;ztext&quot; style=&quot;border:none&quot; value=&quot;Солдат&quot;&gt; вот так без границ делаю,...

input type='text' ... ???
Есть ли возможность в теге &lt;input type='text' ...&gt; задать возможность или невозможность...

if input type text empty alert
Как сделать чтобы если какой либо инпут пуст при нажати на сабмит появлялся алерт что это поле не...

Необходимо изменить value (input type=text)
Всем, привет! Не могу в поисковике найти, так что надеюсь на Вашу помощь! Есть input type=text,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.