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

Question

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

我创建了一个 jsfiddle http://jsfiddle.net/CGDhB/

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

我希望下拉菜单如下图所示

基本上我希望那个小图标和下拉选择框看起来像那样。我对此感到困惑。可以从此处查看暂存链接 http://bit.ly/1eNm3jv

Answer 1

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