CSS和FORM工作，但嵌入时不起作用

I'm a learning developer and:

我是一名学习开发人员,并且:

Im helping a friend style his 'ejunkie' cart and variation button. I have added the CSS myself to stylise it and it seems to be working in places such as Codepen and JS fiddle, but when embedded into Adobe Muse it doesnt show. Perhaps my classes are *ing with an adobe css, but im positive there are no class names *ing. I think my class inputs are correct and in the 'preview' the buttons are functioning correctly and items are succesfully added to cart. Perhaps its a simple fix but ive re written it 4 times and still not functioning correctly.

我正在帮朋友设计他的'ejunkie'购物车和变化按钮。我自己添加了CSS来设计风格,它似乎在Codepen和JS小提琴等地方工作,但是当嵌入到Adobe Muse中时它不显示。也许我的班级与adobe css发生冲突,但我很肯定没有班级名称发生冲突。我认为我的班级输入是正确的,并且在“预览”中按钮功能正常,并且项目已成功添加到购物车中。也许这是一个简单的修复,但我已经写了4次,仍然无法正常运行。

The code i have written is here:

我写的代码在这里:

<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>

The original code to be styled is here:

要设置样式的原始代码如下:

<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>

Am I doing something very wrong?

我做错了吗?

Thank you for your time reading this, and Thankyou for your answers.

感谢您抽出宝贵时间阅读本文,感谢您的回答。

1 个解决方案

#1

Try to use following CSS

尝试使用以下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;
  }

may be you need some more edits, this is as per your given html. Working Fiddle

可能你需要一些更多的编辑,这是根据你给定的HTML。工作小提琴

#1