здравствуйте, кто знает хорошо css пошу разобраться с таким спойлером http://gtascript.ru/test.htm
надо, чтобы поле ввода было не под заголовком спойлера, а прямо в заголовке (где название спойлера)
есть мысль, как-то заставить "выдвинуть" поле ввода на верх маргином или паддингом, но чет пока не получается
подскажите пж как код правильно прописать =/
вот тот код спойлера:
[code]
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style type="text/css">
.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-2" id="spoiler-open-2" class="spoiler_open">Spoiler 2</a>
<a href="#spoiler-close-2" id="spoiler-close-2" class="spoiler_close">Spoiler 2</a>
<div class="spoiler_desc">
<p>Description 2</p>
<p><input type="text" value="some_val 2"></p>
</div>
<a href="#spoiler-open-3" id="spoiler-open-3" class="spoiler_open">Spoiler 3</a>
<a href="#spoiler-close-3" id="spoiler-close-3" class="spoiler_close">Spoiler 3</a>
<div class="spoiler_desc">
<p>Description 3</p>
<p><input type="text" value="some_val 3"></p>
</div>
</body>
</html> [/code]
Изм. 2 раз. / Посл. изм. (10 окт 2015, 16:48)
ну где название(заголовок) спойлера: Spoiler1,Spoiler2..
[мошенник] MasterLomaster, float:right;
Не пробывал?
там правда два заголовка, один отображается когда спойлер закрыт, второй когда открыт
™GoRaS™, не, поле ввода тогда вниз уходит, на нижний заголовок спойлера
[мошенник] <p>Description 1</p>
<p><input type="text" value="some_val 1"></p>
Поменять местами эти строки или удалить заголовок не вариант?
Добавлено 10.10.15 в 16:58:36:
Или я тебя не так понял.
не, можно вот так
<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><input type="text" value="some_val 1"></p>
НО тогда текст в поле не возможно выделить
смысли можно, но при клике на поле оно сразу закрывается, мб можно как-то застопорить сворачивание, что бы закрывалось при клике на любое место, кроме поле ввода ?
Друзья, помогите пж!
срочно нужно сделать этот спойлер
в качестве благодарности могу скинуть 25 вмр(больше нету)
надо реализовать любым способом css html или js
Изм. 2 раз. / Посл. изм. (10 окт 2015, 21:56)
- 1 из 1
