html - 如何更改 DropDown 样式并使其在不同浏览器中相同？

Question

我想让不同浏览器的下拉列表样式一致，首先我删除了箭头的默认样式

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>

我的问题，

在方法一中，文本会覆盖在背景上，如果不使用填充，文本是否会在背景后面？ ，我不想使用填充，因为我希望 RTL​​ 语言和 LTR 提议的左右填充相同。

在方法 2 中，我可以使 JavaScript 在单击按钮时下拉列表吗？

在浏览器上更改选择行为很容易吗？ 在 IE 上，有灰色悬停，蓝色选择

在谷歌浏览器上，有蓝色悬停并选择

Answer 1

我想这可能对您有所帮助。这是自定义选择选项，您可以根据需要更改外观:

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