0

ドロップダウン リストのスタイルを別のブラウザーで同じにしたいのですが、最初に矢印のデフォルト スタイルを削除しました。

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">▼&lt;/button>
      </span>
    </div><!-- /input-group -->
  </div>

私の質問、

方法 1 でテキストが背景からはみ出してしまうのですが、パディングを使用せずにテキストを背景からはみ出すことはできますか? 、言語 RTL 、 LTR で同じパディングが必要なため、パディングを使用したくありません。

方法 2 で、ボタンをクリックするとリストがドロップダウンするように JavaScript を作成できますか?

ブラウザで選択動作を変更するのは簡単ですか? IEでは、灰色のホバリング、青色の選択があります ここに画像の説明を入力

Google chromeでは、青いホバリングをして選択します ここに画像の説明を入力

4

1 に答える 1

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 : デモ

于 2015-06-21T11:54:01.670 に答える