Javascript 如何设置下拉选择框的下拉样式？

如何设置下拉选择框的下拉样式

我已经创建了一个JSFIDLE

皈依
选择一
选择二
皈依
选择一
选择二
结果在这里。。。

我希望下拉列表如下图所示

---

基本上，我希望这个小图标和下拉选择框看起来就是这样。我对此感到困惑。可以从此处查看暂存链接

您确实无法选择样式。据我所知，你唯一能做的就是边框颜色和填充。可能还有字体大小。如@setek所述，必须使用某种插件。

您必须使用类似jQuery和Uniform.js的插件或其他表单样式插件。您不能以这种方式设置实际的

元素的样式，其内部属于shadowDOM，大多数浏览器不允许您对其进行太多更改。Uniform.js的工作原理是替换表单元素，使其可设置样式，并且在更改时将更新原始的

元素。你们有什么特别的jquery插件可以指导我吗？Uniform.js看起来不错。你们还有其他推荐吗？我只使用Uniform.js。我不得不和它一起工作，我非常非常讨厌它。我对其他插件不是很了解，只是使用了这两个插件，更喜欢Uniform.js。

<div class="container">
    <div class="salmatWrapper">
        <div class="col-sm-12 contents">
            <img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
            <div class="form">
                <form class="form-horizontal">
                    <fieldset>
                        <div class="col-xs-6 left">
                            <!-- Enter Value-->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
                                </div>
                            </div>
                            <!-- Convert From -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <select id="custom2" name="custom2" class="form-control">
                                        <option value="" class="selectDefaultText">Convert From</option>
                                        <option value="1">Option one</option>
                                        <option value="2">Option two</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Convert To -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <select id="custom3" name="custom3" class="form-control">
                                        <option value="" class="selectDefaultText">Convert To</option>
                                        <option value="1">Option one</option>
                                        <option value="2">Option two</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 right">
                            <!-- Textarea -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="col-sm-12">
                <img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
            </div>
        </div>
    </div>
</div>