Искажение input при создание модального окна

@ialex25 · Регистрация: 29.01.2015

Студворк — интернет-сервис помощи студентам

Добрый вечер господа! Проблема в следующем:
На сайте изначально реализовал верхний сайдбар по средствам html5\ccs3 (стараюсь по возможности избегать плагинов и скриптом, если это можно реализовать на ужасном и могучем html5\css3 (без фанатизма)).
И сегодня целый день бьюсь (безрезультатно) бьюсь с возникшей проблемой - пытаюсь на сайт добавить модальное меню все теми же Html\css

HTML5
1
2
3
4
5
6
7
8
9
10
<!-- Модальная форма -->
<a href="#x" class="overlay" id="form1"></a>
<form class="modal">
    <input name="name" placeholder="Укажите ваше имя:" class="name" required />
    <input name="emailaddress" placeholder="Укажите ваш Email:" class="email" type="email" required />
    <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
    <input name="submit" class="btn" type="submit" value="Отправить" />
</form>
<!-- конец блока  формы-->
<a href="#form1" class="button-mode1">Открыть форму</a>

CSS модального окна подключен отдельным файлом - @import url("modal-menu-contacts.css"); (он громоздкий возьму в спойлер)

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
@charset "UTF-8";
/* расчет ширины и высоты элементов */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 
/* Базовый стиль формы */
form {
    overflow: hidden;
    margin: 0 auto;
    padding: 30px 30px 6px 30px;
    min-width: 320px;
    max-width: 520px;
    width: 100%;
    border: 1px solid rgba(120,120,120,.7);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(60, 63, 65, 0.9);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/* общие для полей ввода */
textarea, input{
    display:block;
    margin-bottom:20px;
    padding-right:20px;
    padding-left:20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    color:#fff;
    font-weight: 300;
    font-size:18px;
    font-family: 'Open Sans', sans-serif;
}
/* поле сообщения */
textarea{
    overflow:hidden;
    width: 100%;
    height: 110px;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(255, 255, 255, 0.4);
}
/* поля ввода */
input {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
}
input[type=submit] {
    cursor:pointer;
}
input.name {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
input.email {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
input.message {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
::-webkit-input-placeholder {
    color: #fff;
}
:-moz-placeholder{
    color: #fff;
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {
    color: #fff;
}
input:focus, textarea:focus {
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
}
:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }
 
/* Стили для кнопки отправить */
.btn {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #416b68);
    background: -moz-linear-gradient(top, #6da5a3, #416b68);
    background: -ms-linear-gradient(top, #6da5a3, #416b68);
    background: -o-linear-gradient(top, #6da5a3, #416b68);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    color: #e1e1e1;
    outline: none;
}
/* стиль кнопки при наведении */
.btn:hover {
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
}
/* активная кнопка */
.btn:active {
    margin-top:1px;
    border: 1px solid #333333;
    background: #ffCC00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600));
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
    background: -moz-linear-gradient(top, #ffcc00, #ff6600);
    background: -ms-linear-gradient(top, #ffcc00, #ff6600);
    background: -o-linear-gradient(top, #ffcc00, #ff6600);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    color: #fff;
}
/* конец формы */
 
/** стили фона затемнения */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    visibility: hidden;
    /* фон затемнения */
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    position: fixed; /* фиксированное позиционирование */
    /* трансформация прозрачности при открытии  */
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
/* активируем при клике */
.overlay:target {
    visibility: visible;
    opacity: 1;
}
/** стили модального блока */
.modal {
    top: 0;
    right: 0;
    left: 0;
    width: 50%;
    z-index: 10001;
    /** полная прозрачность изначально */
    opacity: 0;
    display: block;
    visibility: hidden;
    position: absolute;
    /* трансформация прозрачности при открытии  */
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;
}
/* активируем при клике */
.overlay:target+.modal{
    top: 25%;
    visibility: visible;
    opacity: 1;
}

И по факту, модальное окно работает, но из-за его стилей пошел "перекос" кнопки стандартного поиска и чекбокса (<input type="checkbox">)верхнего сайдбара (без стилей модального окна - чекбокс скрыт и за счет него показывается\прячется сам сайдбар). Скрин для наглядности:

Искажение input при создание модального окна

Так как я бьюсь с утра, а уже вечер, начинает "клинить" поэтому решил обратиться к Вам за помощью. А вопрос такой:
Как "изолировать" стили модального окна от всех остальных похожих элементов (например <input>, <textarea>)
Понимаю что надо сделать это через отношения селекторов ( > или + или . ) но ума не приложу, как правильно выстроить отношения.
Будте добры..помогите советом.
Спасибо!!!

@Fedor92 · 17.07.2016, 22:17

Сообщение от ialex25

Будьте добры..помогите советом.

Не вопрос...

Используйте при вёрстке классы и идентификаторы для элементов, чтобы стили задавать не через селекторы, а напрямую и будет Вам счастье... Тогда и стили у Вас не будут перемешиваться...

@ialex25 · 17.07.2016, 22:30 **[ТС]**

Согласен (вплане стандартого поиска)

, но самое что странное, почему-то появился скрытый чекбокс слайдера верхнего - хотя он обернут <div class="wrap"></div> а такого быть не долнжо, почему то стили модального меню "зацепили и его.
Вот поэтому я и обратился за помощью ибо бьюсь как рыба об лед.
Понимаю, что фигня осталась, но у меня, как говориться, "творческий кризис" наступил в рамках данной проблемы

@Fedor92 · 17.07.2016, 22:50

ialex25, дык файл modal-menu-contacts.css строка 34:

CSS
1
textarea, input{display:block}

вот он и проявился...

@ialex25 · 17.07.2016, 23:05 **[ТС]**

такс, понял ход Ваших мыслей

правда после 6 часов (пробовал различные варианты и остановился под вечер на этом и не хочу менят ьсвоего решения) бомбления ХЗ выйдет или нет, но я попробую.
Понимаю, что тут не сколько присвоить класы \ id - они уже есть. Требуется выставить правильное их отношение. В интернете смотрел, больше теории по этой части, особых примеров не встречал. Вы не знаете хорошего ресурса где "на пальцах" показанны реализация .1 > .2 ; .1 + .2.
А то в голове мешанина, без примеров уже разобраться не смогу

@Fedor92 · 17.07.2016, 23:13

Сообщение от ialex25

Вы не знаете хорошего ресурса где "на пальцах" показанны реализация .1 > .2 ; .1 + .2.

Вложенные, соседние, контекстные селекторы и до кучи каскадирование на htmlbook... Повторюсь, у Вас вся проблема только в том, что Вы обращаетесь к элементам через селекторы... Если обращаться через идентификаторы или классы таких проблем не возникнет....

@ialex25 · 17.07.2016, 23:20 **[ТС]**

Я уже частично дошел до этого, точнее понял. Я прост давненько не пользовался конструкцией (например) inpunt.1 (или #1). Вроде бы, дело двинулось с мертвой точки.
А Вам спасибо за терпение, и совет

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@ialex25 0 / 0 / 0 Регистрация: 29.01.2015 Сообщений: 53
	17.07.2016, 22:30 [ТС]
	Согласен (вплане стандартого поиска) , но самое что странное, почему-то появился скрытый чекбокс слайдера верхнего - хотя он обернут <div class="wrap"></div> а такого быть не долнжо, почему то стили модального меню "зацепили и его. Вот поэтому я и обратился за помощью ибо бьюсь как рыба об лед. Понимаю, что фигня осталась, но у меня, как говориться, "творческий кризис" наступил в рамках данной проблемы 0

@ialex25 0 / 0 / 0 Регистрация: 29.01.2015 Сообщений: 53
	17.07.2016, 23:05 [ТС]
	такс, понял ход Ваших мыслей правда после 6 часов (пробовал различные варианты и остановился под вечер на этом и не хочу менят ьсвоего решения) бомбления ХЗ выйдет или нет, но я попробую. Понимаю, что тут не сколько присвоить класы \ id - они уже есть. Требуется выставить правильное их отношение. В интернете смотрел, больше теории по этой части, особых примеров не встречал. Вы не знаете хорошего ресурса где "на пальцах" показанны реализация .1 > .2 ; .1 + .2. А то в голове мешанина, без примеров уже разобраться не смогу 0

@ialex25 0 / 0 / 0 Регистрация: 29.01.2015 Сообщений: 53
	17.07.2016, 23:20 [ТС]
	Я уже частично дошел до этого, точнее понял. Я прост давненько не пользовался конструкцией (например) inpunt.1 (или #1). Вроде бы, дело двинулось с мертвой точки. А Вам спасибо за терпение, и совет 0

Искажение input при создание модального окна

Решение