Как зафиксировать CSS спойлер при клике на поле ввода?
нужно поместить поле ввода в заголовок спойлера, вот спойлер 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>
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>
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>
подскажите как можно зафиксировать спойлер при клике на поле ввода ?