Member 13650436 Ответов: 2

Как переопределить стили CSS внутри HTML-документа

В теле моего html документа автоматически генерируются стили, которые выглядят следующим образом:

<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame4" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-305fa942e2b9d7b32be28e14bb9dff11.html#style[base][iconColor]=%23666EE8&style[base][color]=%2331325F&style[base][fontSize]=15px&style[base][::placeholder][color]=%23CFD7E0&componentName=cardNumber&wait=false&rtl=false&features[noop]=true&origin=https%3A%2F%2Fstore.ashenglowgaming.com&referrer=https%3A%2F%2Fstore.ashenglowgaming.com%2Fcheckout%2F%3Fccp-iframe%3Dtrue&controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; height: 18px;">
   <html lang="en">
      <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <link href="fingerprinted/css/ui-shared-3f0e69d72db3ce3b520f344481d0f7a4.css" rel="stylesheet">
         <style>.CardBrandIcon-container{height:100%;position:absolute;top:0;text-align:center;width:1.5em;-webkit-perspective:1000px;perspective:1000px}.CardBrandIcon{position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform .5s cubic-bezier(.075,.82,.165,1);transition:transform .5s cubic-bezier(.075,.82,.165,1);transition:transform .5s cubic-bezier(.075,.82,.165,1),-webkit-transform .5s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1);height:100%}.CardBrandIcon-inner{margin:0;padding:0;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;width:1.5em}.CardBrandIcon.is-amex .CardBrandIcon-inner{transition:opacity .5s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1)}.CardBrandIcon-inner--front{z-index:2;-webkit-transform:rotateY(0);transform:rotateY(0)}.CardBrandIcon-inner--back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.CardBrandIcon img,.CardBrandIcon svg{position:absolute;left:0;top:50%;margin-top:-.55em;height:1em;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0}.CardBrandIcon.is-loaded img,.CardBrandIcon.is-loaded svg{transition:opacity .7s cubic-bezier(.075,.82,.165,1),-webkit-transform .4s cubic-bezier(.075,.82,.165,1);transition:transform .4s cubic-bezier(.075,.82,.165,1),opacity .7s cubic-bezier(.075,.82,.165,1);transition:transform .4s cubic-bezier(.075,.82,.165,1),opacity .7s cubic-bezier(.075,.82,.165,1),-webkit-transform .4s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.CardBrandIcon-container.is-hidden .CardBrandIcon.is-loaded img,.CardBrandIcon-container.is-hidden .CardBrandIcon.is-loaded svg{-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0}.CardBrandIcon.is-cvc{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.CardBrandIcon.is-amex{-webkit-transform:rotateY(0);transform:rotateY(0)}.CardBrandIcon.is-amex .CardBrandIcon-inner--back{opacity:0;-webkit-transform:rotateY(0);transform:rotateY(0)}.CardBrandIcon.is-amex.is-cvc .CardBrandIcon-inner--back{opacity:1;z-index:3}.CardBrandIcon.is-amex.is-cvc .CardBrandIcon-inner--front,.CardBrandIcon.is-amex.is-cvc-hidden .CardBrandIcon-inner--back,.CardBrandIcon.is-cvc-hidden .CardBrandIcon-inner--back{opacity:0}.CardField .CardBrandIcon-container{z-index:2}.CardField:hover{cursor:text}.CardField--unacceleratedTranslate .CardField-child{transition:right .4s cubic-bezier(.25,.46,.45,.94)}.CardField-input-wrapper{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden}.CardField-input-wrapper.is-ready-to-slide{transition:.4s cubic-bezier(.25,.46,.45,.94);transition-property:left,right}.CardField--ltr .CardBrandIcon-container:not(.is-hidden)+.CardField-input-wrapper{left:2em}.CardField--rtl .CardBrandIcon-container:not(.is-hidden)+.CardField-input-wrapper{right:2em}.CardField--ltr .CardBrandIcon-container{left:0}.CardField--rtl .CardBrandIcon-container{right:0}.CardField-number-fakeNumber{position:absolute;pointer-events:none}.CardField-number-fakeNumber-last4{position:absolute;top:0}.CardField--ltr .CardField-number-fakeNumber-last4{right:0}.CardField--rtl .CardField-number-fakeNumber-last4{left:0}.CardField-number-fakeNumber-number{opacity:0}.CardField-number .CardField-number-fakeNumber,.CardField-number input,.CardField-number input:-webkit-autofill{transition:background-color 100000000s,opacity .3s cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)}.CardField-number .CardField-number-fakeNumber,.CardField-number input{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.CardField-number .CardField-number-fakeNumber,.CardField-number.is-hidden input[name=cardnumber].InputElement+.Input-placeholder--ie{opacity:0}.CardField-number.is-hidden .CardField-number-fakeNumber{opacity:1}.CardField-number.is-hidden input[name=cardnumber]{opacity:0}.CardField input::-ms-clear{display:none}.CardField-child{z-index:1;display:inline-block;position:relative;transition:opacity .4s cubic-bezier(.55,.055,.675,.19),-webkit-transform .4s cubic-bezier(.25,.46,.45,.94);transition:opacity .4s cubic-bezier(.55,.055,.675,.19),transform .4s cubic-bezier(.25,.46,.45,.94);transition:opacity .4s cubic-bezier(.55,.055,.675,.19),transform .4s cubic-bezier(.25,.46,.45,.94),-webkit-transform .4s cubic-bezier(.25,.46,.45,.94);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}</style>
      </head>
      <body>
         <div id="root">
            <form class="ElementsApp is-invalid" dir="ltr">
               <style>
                  .ElementsApp, .ElementsApp .InputElement {
                  color: #31325F;font-size: 15px;
                  }
                  .ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill {
                  color: #31325F;
                  -webkit-text-fill-color: #31325F;
                  }
                  .ElementsApp .Icon-fill {
                  fill: #666EE8;
                  }
                  .ElementsApp .InputElement + .Input-placeholder--ie {
                  opacity: 1;color: #CFD7E0;
                  }
                  .ElementsApp .InputElement::-webkit-input-placeholder {
                  opacity: 1;color: #CFD7E0;
                  }
                  .ElementsApp .InputElement::-moz-placeholder {
                  opacity: 1;color: #CFD7E0;
                  }
                  .ElementsApp .InputElement:-ms-input-placeholder {
                  opacity: 1;color: #CFD7E0;
                  }
                  .ElementsApp .InputElement::placeholder {
                  opacity: 1;color: #CFD7E0;
                  }
               </style>
               <span tabindex="-1" aria-hidden="true" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;">0123456789０１２３４５６７８９</span><input tabindex="0" aria-hidden="true" class="StripeField--fake" autocomplete="fake" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;" disabled=""><span><label class="Input" data-max="4242 4242 4242 4242 4240"><input type="tel" autocomplete="cc-number" autocorrect="off" spellcheck="false" name="cardnumber" class="InputElement is-invalid" aria-label="Credit or debit card number" placeholder="1234 1234 1234 1234" aria-placeholder="1234 1234 1234 1234" aria-invalid="true" value="3223 "></label><input tabindex="-1" aria-hidden="true" autocomplete="cc-exp-month" name="cc-exp-month" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"><input tabindex="-1" aria-hidden="true" autocomplete="cc-exp-year" name="cc-exp-year" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"><input tabindex="-1" aria-hidden="true" autocomplete="cc-cvc" name="cc-cvc" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"></span><input tabindex="0" aria-hidden="true" class="StripeField--fake" autocomplete="fake" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;" disabled=""><button tabindex="-1" aria-hidden="true" type="submit" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"></button>
            </form>
         </div>
         <script type="text/javascript" src="fingerprinted/js/shared-46d943f68427ab46131c608f0101fa64.js"></script><script type="text/javascript" src="fingerprinted/js/ui-shared-1023c90b2a41d9c8f93958f6e8e8698f.js"></script><script type="text/javascript" src="fingerprinted/js/elements-inner-card-f9792239cbf3f10e4e7207f8c045788a.js"></script>
      </body>
   </html>
</iframe>


Я хочу переопределить эти стили с помощью своей собственной таблицы стилей CSS. Несмотря на использование квалификации - очень важно похоже , что эти автоматические стили превосходят все остальные стили. Мой вопрос заключается в том, как я могу переопределить их с помощью своего собственного CSS и иметь свой собственный CSS приоритет - в частности, я хочу изменить цвет.

Я не могу удалить или отредактировать эти автоматические стили напрямую, и я не могу коснуться HTML документа. Все, что я могу сделать, это добавить свои собственные стили CSS к внешней таблице стилей.

Для демо-сайта, скриншотов и специфики я уже задавал этот вопрос на >>переполнение стека<< и до сих пор получал мало помощи.

Что я уже пробовал:

Я уже пробовал 
!important


Я попробовал использовать селектор наивысшей специфичности.

Чтобы быть более откровенным, я попытался:

.ElementsApp, .ElementsApp .InputElement {
  color: #31325F !important;
}

Kornfeld Eliyahu Peter

Вы должны показать один точный образец стиля, который вы пытались и не смогли изменить, а также код, относящийся к вашему изменению...

Member 13650436

Я уже показывал вам выше. Когда я сказал, что пытаюсь изменить цвет, я подумал, что это очевидно. Просто скопируйте и вставьте любой из вышеперечисленных стилей и замените один цвет другим, например:
.ElementsApp, .ElementsApp .InputElement {
цвет: оранжевый;
}
Я также упомянул, что использовал важную квалификацию, поэтому просто добавьте, что в очевидном и единственном месте она может идти:
.ElementsApp, .ElementsApp .InputElement {
цвет: оранжевый !важно;
}
Для получения более подробной информации я также включил ссылку на вопрос о переполнении стека в исходное сообщение, которое дает дополнительные детали, которые, как я думал, не было необходимости упоминать здесь, потому что я хотел сохранить его минималистичным здесь.

Kornfeld Eliyahu Peter

Очевидно, что ваши изменения в вопросах произошли позже, чем мой комментарий :-)...
Прежде всего просмотрите свой HTML - это беспорядок...
После этого смотрите этот jsFiddle: https://jsfiddle.net/6mwfgsg3/
Я изменил цвет с #31325f на оранжевый, и он работает, как и ожидалось...

Member 13650436

Приношу свои извинения, если я был неясен - я не могу изменить элемент стиля напрямую - я не могу ничего изменить в теле HTML-документа. Мне разрешено использовать только *внешний CSS* для внесения изменений в стиль, которые я хочу.

Member 13650436

Как я уже сказал, Я не могу редактировать код, который вы предлагаете мне редактировать. Кроме того, я более подробно описал свой код, чтобы проиллюстрировать вам всю природу моей проблемы. Возможно, это была моя вина, что я не дал вам полного контекста. Я отредактировал свой оригинальный пост, чтобы показать, что все содержится в тегах iframe, а это значит, что ничто внутри не может быть переопределено. Вот почему я сказал, что не могу редактировать код - это была бы простая проблема, если бы я мог.

Kornfeld Eliyahu Peter

Если я правильно понимаю ваш код, вы не хотите менять CSS страницы, загруженной в IFRAME внутри вашей страницы...
Удачи...

Member 13650436

Да, это верно. Это не простая проблема...

2 Ответов

Рейтинг:
0

luplup

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

Только дочерний фрейм может получить доступ к родительскому, даже с помощью javascript.
Или вы должны внести изменения в этот внешний html-код...

PS: пожалуйста, опустите меня в другой раз, если вам действительно не нравится это в stackoverflow :)

Рейтинг:
0

luplup

Вы не можете переопределить эти объявления, сделанные в html с помощью внешнего css.

Цитата:
Казалось бы, вы правы, но я надеялся найти решение или обходной путь. Свойства стиля, которые вы видите выше, были автоматически сгенерированы JavaScript. Я не могу коснуться или изменить JavaScript или HTML. Тем не менее, я не могу переопределить их с помощью своих собственных пользовательских таблиц стилей CSS, но мне нужно найти способ. Потому что в данный момент у меня есть черный шрифт на черном фоне, который никто не может прочитать.


Хумм, наконец, он может работать с !важным.
Так что повторите объявление точно с тем же объявлением, что и в html 

.ElementsApp .InputElement:-ms-input-placeholder {
color: red !important;
color: red;
}

Member 13650436

Казалось бы, вы правы, но я надеялся найти решение или обходной путь. Свойства стиля, которые вы видите выше, были автоматически сгенерированы JavaScript. Я не могу коснуться или изменить JavaScript или HTML. Тем не менее, я не могу переопределить их с помощью своих собственных пользовательских таблиц стилей CSS, но мне нужно найти способ. Потому что в данный момент у меня есть черный шрифт на черном фоне, который никто не может прочитать.

Member 13650436

Как я уже сказал, Я не могу редактировать код, который вы предлагаете мне редактировать. Кроме того, я более подробно описал свой код, чтобы проиллюстрировать вам всю природу моей проблемы. Возможно, это была моя вина, что я не дал вам полного контекста. Я отредактировал свой оригинальный пост, чтобы показать, что все содержится в тегах iframe, а это значит, что ничто внутри не может быть переопределено. Вот почему я сказал, что не могу редактировать код - это была бы простая проблема, если бы я мог.

luplup

Источник, который вы показываете, похоже, является сгенерированным html.
И проблема, безусловно, из-за этого iframe.

Пользовательский интерфейс-общий-3f0e69d72db3ce3b520f344481d0f7a4.в CSS файл, в котором вы пытаетесь переопределить в CSS ?
Если нет, то вы не можете управлять css этого дочернего iframe с помощью css-файла, присутствующего в Родительском файле.