CSS and FORM working, but does not work when embedded

Question

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 clashing with an adobe css, but im positive there are no class names clashing. 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.

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.

Answer 1

Try to use following 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