(10 окт 2015, 17:00) (0/0)
[0]
не, можно вот так
<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
<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
(10 окт 2015, 16:47) (0/0)
[0]
™GoRaS™, не, поле ввода тогда вниз уходит, на нижний заголовок спойлера
(10 окт 2015, 16:43) (0/0)
[0]
там правда два заголовка, один отображается когда спойлер закрыт, второй когда открыт
(10 окт 2015, 16:39) (0/0)
[0]
здравствуйте, кто знает хорошо 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]
надо, чтобы поле ввода было не под заголовком спойлера, а прямо в заголовке (где название спойлера)
есть мысль, как-то заставить "выдвинуть" поле ввода на верх маргином или паддингом, но чет пока не получается
подскажите пж как код правильно прописать =/
вот тот код спойлера:
[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]
- 1 из 1
