相关疑难解决方法(0)

这是我的HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

现在,我想要的是将产品的名称(即'Product1','Product2'等)加粗,并使用css将其类别(即电子,运动等)斜体化.我发现了一个关于一岁的类似问题,但正如那里提到的那样,使用HTML和CSS是不可能的.希望现在有一个解决方案.任何提示,怪癖或技巧将不胜感激.谢谢.

我试图将第一个选项的颜色更改为灰色,只有文本(选择一个选项),但这里它不起作用:

.grey_color {
  color: #ccc;
  font-size: 14px;
}

<select id="select">
   <option selected="selected"><span class="grey_color">select one option</span></option>
   <option>one</option>  
   <option>two</option>  
   <option>three</option>  
   <option>four</option>  
   <option >five</option>  
</select>

我的jsfiddle在这里是jsfiddle