How Change DropDown style and make it same in different browsers?

Question

I want to make the style of drop-down list same on different browser, first I have remove the default style of arrow

select {

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
select::-ms-expand {
    display: none;
}
.Default{
padding:0px 0px;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right center;

}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="col-lg-12">
   Method 1:
    <div >
     <select class=" Default">
        <option value="1">Test long text ...text text text</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select> 
    </div>
  </div>
<br/>

 <div class="col-lg-6">
     Method 2
    <div class="input-group">
     <select class="form-control">
        <option value="1">Test long text ...text text text</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">▼</button>
      </span>
    </div><!-- /input-group -->
  </div>

my questions,

In method 1 the text become over the background , can the text become behind the background without using padding? , I don't want use padding because I want right and left padding same for languages RTL , LTR propose .

In method 2 , can I make JavaScript that when click on button the list drop down?

it is easy to change the select behavior on browser? on IE , have gray hovering , blue select enter image description here

on Google chrome, have blue hovering and select enter image description here

Unfortunately there is no real way to do this cross browser. Some libraries like bootstrap come pretty close, but not fully. — ajmajmajma, Jun 20 '15 at 13:58

score 1 · Answer 1 · answered Jun 21 '15 at 11:54

I think this might help you. It's custom select option, you can change look and feel as per your requirement:

HTML

<div class="select_holder">
    <div class="select">
        <table>
            <tr>
                <th id="selector"><span class="opt_selected">Select your option</span><span class="arrow"> > </span></th>
            </tr>
            <tr>
                <th class="disabled">Select your option</th>
            </tr>
            <tr>
                <td>Option 1</td>
            </tr>
            <tr>
                <td>Option 2</td>
            </tr>
            <tr>
                <td>Option 3</td>
            </tr>
            <tr>
                <td>Option 4</td>
            </tr>
        </table>
    </div>
    <br>
    <input type="hidden" name="option" id="option"/> <!-- To store value in Database -->
</div>

CSS

.select_holder {
    display: block;
    margin-top: 100px;
    width:auto;
    height:auto;
    text-align: center;
    background: #fff;
}
.select {
    display:inline-block;
    width:200px;
    height:40px;
    overflow:hidden;
}
.select_show {
    height:auto;
}
table {
    width:100%;
    text-align:left;
    margin:0px;
    font-family:Calibri;
    border-radius:3px;
    border-collapse:collapse;
}
.arrow {
    display:inline-block;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    float:right;
    position:relative;
    line-height:20px;
    font-size:25px;
}
tr {
    width:100%;
    margin:0px;
    height:40px;
    border-bottom:1px solid #ddd;
    cursor:pointer;
}
tr:nth-child(1) {
    background:#ddd;
}
td {
    margin:0px;
    background:#eee;
    transition: all 5 ease-in-out;
}
td, th {
    padding:0px 10px;
}
td:hover {
    background:#ccc;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.disabled {
    background:#eee;
    font-weight:normal;
    color:grey;
}
#selector {
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;}

JS/JQuery

$(document).ready(function(){
$("tr").click(function () {
    $(".select").toggleClass("select_show");
});

$("td").click(function () {
    var curOption = this.innerHTML;
    $("#selector").html(curOption);
    document.getElementById("option").setAttribute("value", curOption);
});

});

PHP

$selectedOption = $_Post['option']; /* Value from the input type="hidden" */

JSFiddle : Demo

How Change DropDown style and make it same in different browsers?

1 Answers1