Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11634
Последний выпуск: 19.06.2015

Как зафиксировать CSS спойлер при клике на поле ввода?

79K
10 октября 2015 года
Goldfish
3 / / 22.10.2014
нужно поместить поле ввода в заголовок спойлера, вот спойлер http://gtascript.ru/test.htm

вот код

Код:
.spoiler_open, .spoiler_close {
display: block;
height: 27px;
width: 100%;
padding-top: 5px;
background: #3B3B3B;
border-radius: 3px 3px 0px 0px;
border-bottom: 0px dotted #BFBFBF;
text-indent: 10px;
text-decoration: none;
color: #FFFFFF;
cursor: default;
}
.spoiler_close {
display: none;
}
.spoiler_desc {
display: none;
background: #D1D1D1;
padding: 5px;
border-radius: 2px;
}
.spoiler_open:target {
display: none;
}
.spoiler_open:target + .spoiler_close,
.spoiler_open:target + .spoiler_close + .spoiler_desc {
display: block;
}
</style> </head>

<body>
<a href="#spoiler-open-1" id="spoiler-open-1"  
class="spoiler_open">Spoiler 1</a>
<a href="#spoiler-close-1" id="spoiler-close-1"
class="spoiler_close">Spoiler 1</a>
<div class="spoiler_desc">
<p>Description 1</p>
<p><input type="text" value="some_val 1"></p>
</div>
Можно написать так:
 
Код:
<a href="#spoiler-open-1" id="spoiler-open-1"  
class="spoiler_open">Spoiler 1</a>
<a href="#spoiler-close-1" id="spoiler-close-1" class="spoiler_close">  
<input type="text" value="some_val 2"></a>
<div class="spoiler_desc">
<p>Description 1</p>
<p><input type="text" value="some_val 1"></p>
</div>
но тогда, если нажать на поле вводе, то спойлер закрывается =/

подскажите как можно зафиксировать спойлер при клике на поле ввода ?

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог