Quote (likbezz)
Убираются за счёт смещения текста кнопки (input.uSpoilerButton) вправо .... на «-22px» ...
Остальное - коррекция погрешностей в связи со смещением.
...
Стили для Стандартного спройлера.
Вариант на чистом CSS ... используя псевдо-селекторы, а именно - селекторы атрибутов ...
Минус - работает только в браузерах поддерживающие данные CSS-селекторы.
Quote (Info)
Есть 6 различных типов атрибутов: [att=value] - Атрибут должен иметь
точные значения.
[att~=value] - Атрибуты селектора должны быть разделены пробелами - список слов (например, class=”title featured myClass”), и одно из слов точно заданного значения.
[att|=value] -Атрибут значение именно “value” или начинается со слова “value”, и это сразу после “-”, поэтому он будет “value-”.
[att^=value] -Значение атрибута начинается с заданного значения (”value”).
[att$=value] -Значение атрибута содержит указанное значение (“value”).
[att*=value] - Значение атрибута заканчивается на “value”.
Сами стили:
Code
<style type="text/css">
/* StartStyle */
input.uSpoilerButton{width:100%;text-align:left;outline:0;cursor:pointer;}
.uSpoilerClosed input.uSpoilerButton[value^="["]{text-indent:-22px;}
.uSpoilerOpened input.uSpoilerButton[value^="["]{text-indent:-20px;}
/* EndStyle */
</style>
☑ Пример ....
...
Вариант на CSS ... + небольшой jQuery скрипт .....
Плюс - работает во всех обозревателях, с включённым JS ....
Сам скрипт:
Code
<script type="text/javascript">
$(function(){
$('input.uSpoilerButton[value^="["]').addClass('myReplace');
});
</script>
Где:
$('input.uSpoilerButton[value^="["]').addClass('myReplace'); - импутам с “плюсиками” (начинающимся со скобочки «[») ljдобляем свой класс. От которого и будет зависеть оформление. Стили:
Code
<style type="text/css">
/* StartStyle */
input.uSpoilerButton{width:100%;text-align:left;outline:0;cursor:pointer;}
.uSpoilerClosed input.uSpoilerButton.myReplace{text-indent:-22px;}
.uSpoilerOpened input.uSpoilerButton.myReplace{text-indent:-20px;}
/* EndStyle */
</style>
☑ Пример ....
....
