Переопределить стили формы из внешнего скрипта...
 

Уперся в задачу и никак не могу её победить...

На сайт загружается некая форма, которая формируется на другом сайте. Стили этой формы переопределить не получается. Ни прямым назначением, ни !important - не получается.

Скорее всего это из за того что форма появляется на странице только после того как все стили страницы уже загрузились.

В коде загрузки формы нет никаких настроек, так что этот вариант я то же проверил. это просто линк на скрипт с того сайта который отдает эту форму.

<script type="text/javascript" src="//www1.moon-ray.com/v2.4/include/formEditor/genbootstrap.php?method=script&uid=***********&version=1"></script>

С супортом того сайта я то же уже поговорил... результата ноль.

Вот решил спросить у гуру css.
Как можно переназначить стили для объекта который формируется на другом сайте и передается на мой сайт скриптом?

Надеюсь я понятно описал проблему.

Спасибо за помощь.:thanks:

Что значит "на другом сайте"? Элемент может быть создан только в браузере и нигде больше, ни на каком-то сайте, ни на сервере ни на луне. Может скрипт выводит фрейм?

Да, я это понимаю, но форма приходит со своим css и я никак не пойму как его переопределить.

вот что выводит скрипт в браузере

<div class="opt">
<script type="text/javascript" src="//www1.moon-ray.com/v2.4/include/formEditor/genbootstrap.php?method=script&amp;uid=**********&amp;version=1"></script><span class="moon-ray-form-placeholder-11233"><link rel="stylesheet" href="//www1.moon-ray.com/formeditor/formeditor/css/form.default.css" type="text/css"><link rel="stylesheet" href="//www1.moon-ray.com/formeditor/formeditor/css/form.publish.css" type="text/css"><link rel="stylesheet" href="//forms.moon-ray.com/v2.4/include/minify/?g=moonrayCSS" type="text/css"><link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css"><link rel="stylesheet" href="//www1.moon-ray.com/v2.4/include/formEditor/gencss.php?uid=**********" type="text/css"><div class="moonray-form-**********"><div class="moonray-form moonray-form-label-pos-stacked">
<form class="moonray-form-clearfix" action="https://forms.moon-ray.com/v2.4/form_processor.php?" method="post" accept-charset="UTF-8" novalidate="novalidate">
<div class="moonray-form-element-wrapper moonray-form-element-wrapper-alignment-left moonray-form-element-html"><div id="mr-field-element-**********" class=" moonray-form-element-html"><div style="text-align: center; ">
	<br>
	<span style="color:#ff0000;"><span style="font-family:georgia,serif;"><span style="font-size:16px;">**********<br>
	on <strong>********** &amp; **********!</strong></span></span></span></div>
<link href="http://fonts.googleapis.com/css?family=Gudea:700" rel="stylesheet" type="text/css">
<span style="color:#ffffff;"><span style="font-size: 16px; "><span style="font-family: georgia, serif; "><strong>&nbsp; &nbsp; &nbsp; &nbsp;</strong></span></span></span><br>
</div></div>
<div class="moonray-form-element-wrapper moonray-form-element-wrapper-alignment-left moonray-form-element-html"><div id="mr-field-element-**********" class=" moonray-form-element-html"><div style="text-align: center; ">
	&nbsp;</div>
<div style="text-align: center; ">
	<span style="font-family:georgia,serif;"><strong><span style="font-size:12px;">Delivered Exclusively to your Inbox</span></strong></span><br>
	&nbsp;</div>
</div></div>
<div class="moonray-form-element-wrapper moonray-form-element-wrapper-alignment-left moonray-form-input-type-text"><label for="mr-field-element-**********" class="moonray-form-label">FIRST NAME</label><input name="firstname" type="text" class="moonray-form-input" id="mr-field-element-*******" required="" value="" placeholder="" data-required="true"></div>
<div class="moonray-form-element-wrapper moonray-form-element-wrapper-alignment-left moonray-form-input-type-text"><label for="mr-field-element-**********" class="moonray-form-label">LAST NAME</label><input name="lastname" type="text" class="moonray-form-input" id="mr-field-element-**********" value="" placeholder=""></div>
<div class="moonray-form-element-wrapper moonray-form-element-wrapper-alignment-left moonray-form-input-type-email"><label for="mr-field-element-**********" class="moonray-form-label">EMAIL ADDRESS</label><input name="email" type="email" class="moonray-form-input" id="mr-field-element-**********" required="" value="" placeholder="" data-required="true"></div>
<div class="moonray-form-element-wrapper moonray-form-element-wrapper-alignment-center moonray-form-input-type-submit"><input type="submit" name="submit-button" value="COUNT ME IN !!" class="moonray-form-input" id="mr-field-element-**********" src=""></div>
******************************
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="afft_" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="aff_" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="sess_" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="ref_" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="own_" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="oprid" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="contact_id" type="hidden" value=""></div>
<div class="moonray-form-element-wrapper moonray-form-input-type-hidden"><input name="uid" type="hidden" value="**********"></div>

					</form>
				</div>
			</div></span>
</div>

Ну нет тут никаких фреймов. Смело через !important можно переписывать стили. Так и чего не получается то?

Все мои !important не работают.

Те стили которые прописаны непосредственно в каждом элементе, это не все стили. Большая их часть грузится прямо с "того" сайта.

Например:

.moonray-form-*********** .moonray-form {
width: 255px;
border-width: 2px;
border-style: solid;
border-color: #e809d5;
background-color: #dedbdb;
background-image: url();
background-repeat: no-repeat;
background-position: left top;
border-radius: 3px;
}

этот стиль идет с их сайта.

... может я туплю? :)

Это самая вероятная причина. Ибо домен файла стилей на приоритете не сказывается ни как.

Дело скорей всего в ошибке, например неправильный селектор пишешь.

Пока что сделал костыль. Вставил эту форму в див и переписал стили для получившейся иерархии элементов.

Но этот костыль не работает постоянно и периодически слетает. По тому что в названиях классов динамически меняется идентификатор формы. И все классы снова слетают. Этого наверное принципиально не победить.

Ну значит не использовать в селекторе динамическую часть. На крайняк скриптом отслеживать id и подставлять в селектор.

Tnks! :thanks:

Хорошая идея.

Жаль я поторопился плюсик поставить выше, а ещё один плюсик форум рубит на корню.