CODEWITHSUNDEEP
javascripthtmlcsshtml-select
Hello Universe
Hello Universe

Reputation: 3302

How to style drop downs of drop down select boxes?

How to style drop downs of drop down select boxes?

I have created a 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>

I want the drop downs to look as in below image

enter image description here

Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv

Upvotes: 0

Views: 621

Answers (1)

Megaroeny
Megaroeny

Reputation: 827

You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like @setek mentioned, gonna have to use some kind of plugin.

Upvotes: 1

Related Questions