Почему не применяются стили через тег?

Question

[barsecky]

Добрый день.
Возник вопрос:
на страницу нужно внести блок вопрос-ответ, но сделать это нужно с помощью редактора страницы в wordpress, без плагинов и тп.
Права у меня ограниченные.
Когда вношу код у себя на локалке (на своем сайте)- код отрабатывает
При переносе на сайт , css не отрабатывает.
Есть ли ограничения для внесения css через редактор или что то делаю не так?
Редактор классический не гутенберг

Код вношу на страницу так:

<style>
.question-input {
	display: none;
}

.question-label {
  display: block;
  position: relative;
}

.question-label:after {
  position: absolute;
  right: 10px;
  top: 3px;
  content: '';
  display: block;
  width: 1px;
  height: 15px;
  background-color: #000;
  transform: rotate(0deg);
        transition: all 0.3s linear;

}

.question-label:before {
  position: absolute;
  right: 10px;
  top: 3px;
  content: '';
  display: block;
  width: 1px;
  height: 15px;
  background-color: #000;
  transform: rotate(90deg);
        transition: all 0.3s linear;

}

.answer {
	height: 0;
	overflow: hidden;
	transition: 0.5s;
}

.question-input:checked + .question-label:after {
  transform: rotate(45deg);
}

.question-input:checked + .question-label:before {
  transform: rotate(135deg);
}

.question-input:checked + .question-label + .answer {
	height: auto;
	padding: 10px 0;
}

.wrapper {
  padding: 0;
  border: none;
}

fieldset {
  border-radius: 5px;
  margin-bottom: 5px;
}

</style>

<fieldset class="wrapper">
  
<fieldset>
  <input class="question-input" id="question" type="checkbox">
<label class="question-label" for="question">
	Что такое куница?
</label>
<div class="answer">
Куница - это вредитель, который любит гнездиться в наших садах, на чердаках и в гаражах.
</div>
</fieldset>


<fieldset>
  <input class="question-input" id="question2" type="checkbox">
<label class="question-label" for="question2">
Как избавиться от куницы?
</label>
<div class="answer">
Существуют способы не только избавиться от куницы, но и предотвратить ее возвращение.
</div>
</fieldset>


<fieldset>
  <input class="question-input" id="question3" type="checkbox">
<label class="question-label" for="question3">
	Как уберечься от куниц?
</label>
<div class="answer">
	Один из проверенных способов - использовать собаку, которая постоянно находится на улице. Собака, охраняющая участок, не только отпугнет куницу, но и пресечет ее попытки проникнуть на чердак или мансарду.
</div>
</fieldset>

<fieldset>
  <input class="question-input" id="question4" type="checkbox">
<label class="question-label" for="question4">
	Как узнать, что куницы поселились у меня в саду?
</label>
<div class="answer">
Если вы заметили наличие гнезда куницы в своем саду, это знак, что они уже поселились там.
</div>
</fieldset>

<fieldset>
  <input class="question-input" id="question5" type="checkbox">
<label class="question-label" for="question5">
Может ли собака отпугнуть куницу из моего сада?
</label>
<div class="answer">
Да, собака, постоянно находящаяся на улице, может отпугнуть куницу из сада.
</div>
</fieldset>
</fieldset>

Answer 1

[ProgerMir]

В вашей версии при внесении кода на страницу появляются теги <p>...</p>внутри кода <style>...</style>, а также не кликабельный плюс для раскрытия ответа.
Я сжал код html и css через compressor online, код внести вот так попробуйте:

.question-input{display:none}.question-label{display:block;position:relative}.question-label:after{position:absolute;right:10px;top:3px;content:'';display:block;width:1px;height:15px;background-color:#000;transform:rotate(0deg);transition:all .3s linear}.question-label:before{position:absolute;right:10px;top:3px;content:'';display:block;width:1px;height:15px;background-color:#000;transform:rotate(90deg);transition:all .3s linear}.answer{height:0;overflow:hidden;transition:.5s}.question-input:checked + .question-label:after{transform:rotate(45deg)}.question-input:checked + .question-label:before{transform:rotate(135deg)}.question-input:checked + .question-label + .answer{height:auto;padding:10px 0}.wrapper{padding:0;border:none}fieldset{border-radius:5px;margin-bottom:5px}

<fieldset class="wrapper"><fieldset><input class="question-input" id="question" type="checkbox"><label class="question-label" for="question">Что такое куница?</label><div class="answer">Куница - это вредитель, который любит гнездиться в наших садах, на чердаках и в гаражах.</div></fieldset><fieldset><input class="question-input" id="question2" type="checkbox"><label class="question-label" for="question2">Как избавиться от куницы?</label><div class="answer">Существуют способы не только избавиться от куницы, но и предотвратить ее возвращение.</div></fieldset><fieldset><input class="question-input" id="question3" type="checkbox"><label class="question-label" for="question3">Как уберечься от куниц?</label><div class="answer">Один из проверенных способов - использовать собаку, которая постоянно находится на улице. Собака, охраняющая участок, не только отпугнет куницу, но и пресечет ее попытки проникнуть на чердак или мансарду.</div></fieldset><fieldset><input class="question-input" id="question4" type="checkbox"><label class="question-label" for="question4">Как узнать, что куницы поселились у меня в саду?</label><div class="answer">Если вы заметили наличие гнезда куницы в своем саду, это знак, что они уже поселились там.</div></fieldset><fieldset><input class="question-input" id="question5" type="checkbox"><label class="question-label" for="question5">Может ли собака отпугнуть куницу из моего сада?</label><div class="answer">Да, собака, постоянно находящаяся на улице, может отпугнуть куницу из сада.</div></fieldset></fieldset>

Comments

[barsecky]

отрабатывает только часть css(((
крестики крутятся, чекбоксы не скрыты и текст не появляется((
что блин это за беда((

[ProgerMir]

Прикрепил фото, у меня срабатывает.
Какой код у вас виден в консоли? Скорее всего, вы оставили где-то пробелы, отступы.
И крестики при вашем коде находятся поверх текста справа, я бы для их корректного отображения поменял этот код в css:

input[type=checkbox]+label, label.inline {
    display: inline-block;
    width: 100%;
    font-weight: 400;
    margin-left: 5px;
}

[barsecky]

ProgerMir, дело в том что на локалке в другом проекте код отрабатывает. А вот в нужном мне проекте на сервере код работать не хочет. В консоли тега style нет вобще(( хотя код частично отрабатывает(( Вот страница на которую внесён код https://www.divanyikresla.by/blog/domashnie-kunicy...
Просто не могу понять, или в самом вордпрес настройка стоит какая, или может быть есть другой способ внести код на страницу, через редактор, о котором я не знаю? ((

[ProgerMir]

barsecky, страницу смотрел, возможно, вы правы, и действует настройка. Я не применял данные методы, но наблюдал у других пользователей.