Customize DropDown List

.search_categories {
            font-size: 13px;
            padding: 10px 8px 10px 14px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
        }

            .search_categories .select {
                width: 120%;
                background: url('arrow.png') no-repeat;
                background-position: 80% center;
            }

                .search_categories .select select {
                    background: transparent;
                    line-height: 1;
                    border: 0;
                    padding: 0;
                    border-radius: 0;
                    width: 120%;
                    position: relative;
                    z-index: 10;
                    font-size: 1em;
                }





<div class="search_categories">
                            <div class="select">
                                <select name="search_categories" id="search_categories">
                                    <option value="1" selected="selected">Happy</option>
                                    <option value="2">Great</option>
                                    <option value="3">Nice Solution</option>
                                    <option value="4">Awesome</option>
                                </select>
                            </div>
                        </div>