CSS 和 FORM 工作，但在嵌入时不工作

Question

我是一名学习型开发人员并且：

我正在帮一个朋友设计他的 'ejunkie' 购物车和变体按钮。我自己添加了 CSS 来设计它，它似乎在 Codepen 和 JS fiddle 等地方工作，但是当嵌入到 Adobe Muse 中时它不显示。也许我的 classes 与 adobe css 冲突，但我肯定没有 class 名称冲突。我认为我的 class 输入是正确的，在 'preview' 中，按钮功能正常，商品已成功添加到购物车。也许这是一个简单的修复，但我已经重写了 4 次，但仍然无法正常运行。

我写的代码在这里：

<style>


  .titles1 {
    color: black;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }

  .sizes1 {
    color: #000;
    background-color: ;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .sizes1:hover {
    color: #fff;
    background-color: #000 !important;
  }

  .colours1 {
    color: #000;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .colours1:hover {
    color: #fff;
    background-color: #000 !important;
  }

  .ec_ejc_thkbx {
    margin-left: 65px;
    margin-top: 10px;
  }

</style>

<form class="titles1" action="https://www.e-junkie.com/ecom/gb.php?c=cart&cl=304052&i=1&ejc=2" method="POST" target="ejejcsingle" accept-charset="UTF-8" >
<input type="hidden" name="on0" value="Size">
Size:<br>
<select name="os0" class="sizes1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="ExtraLarge">ExtraLarge</option>
</select><br>
<input type="hidden" name="on1" value="ColourWays">
ColourWays:<br>
<select name="os1" class="colours1" >
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Navy">Navy</option>
<option value="GreyMarl">GreyMarl</option>
<option value="Royal">Royal</option>
</select><br>
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0"  alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);">
</form>

要设置样式的原代码在这里：

<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&cl=304052&i=1&ejc=2" method="POST" target="ejejcsingle" accept-charset="UTF-8">
<input type="hidden" name="on0" value="Size">
Size:<br>
<select name="os0">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="ExtraLarge">ExtraLarge</option>
</select><br>
<input type="hidden" name="on1" value="ColourWays">
ColourWays:<br>
<select name="os1">
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Navy">Navy</option>
<option value="GreyMarl">GreyMarl</option>
<option value="Royal">Royal</option>
</select><br>
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0"  alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);">
</form>

我是不是做错了什么？

感谢您花时间阅读本文，感谢您的回答。

Answer 1

尝试使用以下CSS

  form[target="ejejcsingle"] {
    color: black;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }

  select[name="os0"]{
    color: #000;
    background-color: ;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  select[name="os0"]:hover {
    color: #fff;
    background-color: #000 !important;
  }

  select[name="os1"] {
    color: #000;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  select[name="os1"]:hover {
    color: #fff;
    background-color: #000 !important;
  }

  .ec_ejc_thkbx {
    margin-left: 65px;
    margin-top: 10px;
  }

您可能需要更多编辑，这是根据您给定的 html。工作 Fiddle

CSS 和 FORM 工作，但在嵌入时不工作

CSS and FORM working, but does not work when embedded

html

javascript

css

muse