ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает CSS checkbox hack на мобильном устройстве
2 сообщений из 2, страница 1 из 1
Не срабатывает CSS checkbox hack на мобильном устройстве
    #39122203
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Использую такой код, чтобы сделать выплывающий сайдбар:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<div id="main-wrapper">
	<input id="sidebar-control" type="checkbox" />
	<div id="sidebar-tag" title="Есть задолженность">
		<div id="money" title="Баланс лицевого счета">Баланс: <span id="money-value">-99999.99</span></div>
		<label for="sidebar-control"></label>
	</div>
	<main id="content">
		<div id="content-body">
			<div id="sidebar-pad"></div>
			content
		</div><!-- #content-body -->
	</main><!-- #content -->
	<aside id="sidebar">
		<div id="sidebar-body">
			sidebar
		</div><!-- #sidebar-body -->
	</aside><!-- #sidebar -->
</div><!-- #main-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.
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.
#sidebar-tag
{
	border: 1px solid #666;
	background-color: #EEE;
	color: #000;
}

#sidebar-pad
{
	float: right;
	font-family: Consolas, monospace;
	font-size: 110%;
	line-height: 100%;
	width: 25ex;
	height: 3em;
	margin: 2px;
}
#sidebar-tag
{
	font-family: Consolas, monospace;
	font-size: 110%;
	line-height: 100%;
	width: 25ex;
	height: 3em;
	position: absolute;
	vertical-align: middle;
	right: 0;
	margin: 2px;
	border-radius: 8px;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
#sidebar
{
	display: table-cell;
	visibility: collapse;
	width: 0;
	overflow: auto;
}
#sidebar > #sidebar-body
{
	display: none;
}
#sidebar-control
{
	display: none;
}
#sidebar-control:checked ~ #content > #content-body > #sidebar-pad
{
	display: none;
}
#sidebar-control:checked ~ #sidebar-tag
{
	width: 15ex;
	height: 1.5em;
	border-color: #CCC;
	background-color: #EEE;
	color: #CCC;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#sidebar-control:checked ~ #sidebar-tag > label
{
	font-weight: bold;
}
#sidebar-control:checked ~ #sidebar-tag > label:after
{
	content: "Свернуть";
}
#sidebar-control:checked ~ #sidebar-tag > #money
{
	display: none;
}
#sidebar-control:checked ~ #sidebar
{
	visibility: visible;
	width: 30ex;
	background-color: #FFE;
	border-left: 2px solid #CC9;
}
#sidebar-control:checked ~ #sidebar > #sidebar-body
{
	display: block;
}

#sidebar-tag > #money
{
	display: block;
	margin-top: 8px;
	text-align: center;
	font-weight: bold;
}

#sidebar-tag > label
{
	display: block;
	margin-top: 4px;
	text-align: center;
	font-size: 85%;
	font-weight: bold;
	color: #666;
}
#sidebar-tag > label:after
{
	content: "Подробнее";
}



На ПК все хорошо.
А на мобильном устройстве текст "Подробнее" не кликается и сайдбар не выплывает.
Я подумал было, что дело в отсутствии контента, а на псевдоэлементе мобильный браузер кликать не умеет.
Сделал так:
Код: html
1.
		<label for="sidebar-control">#</label>


Ничего не поменялось.
Затем прочитал, что на старых iOS в iPhone элемент label по умолчанию не кликается.
Сделал так:
Код: html
1.
		<label for="sidebar-control" onclick="">#</label>


Теперь текст "Подробнее" кликается, но сайдбар не всплывает.

Если #sidebar-control сделать видимым, то видно, что при клике по тексту "Подробнее" состояние чекбокса меняется.
То есть похоже на то, что мобильный браузер не понимает псевдокласс :checked.
Но тут пишут, что он поддерживается практически на любом современном устройстве.
Может быть я им неправильно пользуюсь?
________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
07.12.2015, 12:44
| Ответить | Цитировать | Написать  
Не срабатывает CSS checkbox hack на мобильном устройстве
    #39122237
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Похоже дело в браузере.
Тут демонстрация тоже не работает: https://css-tricks.com/the-checkbox-hack/
...
Рейтинг: 0 / 0
07.12.2015, 13:01
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает CSS checkbox hack на мобильном устройстве
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]