2017-10-26 16 views
0

私はCSSでスタイル付けした選択ボックスに問題があります。 Chromeでホバーオーバーすると白いボックスが表示されます。 Safariではすべてが正常です。すべての手がかりは? 私はcssとhtmlを追加しました。また、問題の写真も追加しました。最初のものは、サファリであり、2つ目は、クロムChromeを使用した選択した要素の白いボックス

.dropdown { 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t top: 10; 
 
\t left 50%; 
 
\t width: 190px; 
 
\t height: 2em; 
 
\t line-height: 2; 
 
\t background: #E9B6B0; 
 
\t overflow:scroll \t ; 
 
\t border-radius: .35em; 
 
\t margin-bottom: 5px; 
 

 
} 
 
.dropdown select { 
 
\t -webkit-appearance: none; 
 
\t -moz-appearance: none; 
 
\t -ms-appearance: none; 
 
\t appearance: none; 
 
\t background-image: none; /* remove the value that chrome dose not use */ 
 
    background-color: #E9B6B0; /* set the value it does */ 
 
    border-radius: 4px;  /* make it look kinda like the background image */ 
 
    border: 1px solid #888; 
 
\t outline: 0; 
 
\t box-shadow: none; 
 
\t border: 0 !important; 
 
\t background: #E9B6B0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t margin: 0; 
 
\t padding: 0 0 0 .5em; 
 
\t color: black; 
 
\t cursor: pointer; 
 
\t font-size: 15px; 
 

 
} 
 

 
.dropdown::after { 
 
\t content: '\25BE'; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t padding: 0 1em; 
 
\t background: #E9B6B0; 
 
\t pointer-events: none; 
 
} 
 

 
.dropdown:hover::after { 
 
\t color: white; 
 
} 
 
.dropdown::after { 
 
\t -webkit-transition: .25s all ease; 
 
\t -o-transition: .25s all ease; 
 
\t transition: .25s all ease; 
 
}
<div class="dropdown"> 
 
\t <select id="genre" onchange="filterConcerts()" value="default"> 
 
\t \t <option value="default">Sjanger</option> 
 
</div>

Boxes in Safari

Boxes in Chrome

+0

あなたはChromeで実行されている任意のブラウザ拡張を持っていますか?私は拡張機能によって注入されたようなものを見てきました。拡張機能をインストールせずにシークレットウィンドウで表示してみてください。また、Dev Toolsで手がかりを調べてみてください。 – CreMedian

+0

白いボックスは表示されません。あなたはdrodpownのその部分を調べることができますか?疑似セレクタかもしれない? –

答えて

1

変更オーバーフローである:スクロール。オーバーフローする:auto;あなたの.dropdownクラスで

.dropdown { 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t top: 10; 
 
\t left 50%; 
 
\t width: 190px; 
 
\t height: 2em; 
 
\t line-height: 2; 
 
\t background: #E9B6B0; 
 
\t overflow:auto \t ; 
 
\t border-radius: .35em; 
 
\t margin-bottom: 5px; 
 

 
} 
 
.dropdown select { 
 
\t -webkit-appearance: none; 
 
\t -moz-appearance: none; 
 
\t -ms-appearance: none; 
 
\t appearance: none; 
 
\t background-image: none; /* remove the value that chrome dose not use */ 
 
    background-color: #E9B6B0; /* set the value it does */ 
 
    border-radius: 4px;  /* make it look kinda like the background image */ 
 
    border: 1px solid #888; 
 
\t outline: 0; 
 
\t box-shadow: none; 
 
\t border: 0 !important; 
 
\t background: #E9B6B0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t margin: 0; 
 
\t padding: 0 0 0 .5em; 
 
\t color: black; 
 
\t cursor: pointer; 
 
\t font-size: 15px; 
 

 
} 
 

 
.dropdown::after { 
 
\t content: '\25BE'; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t padding: 0 1em; 
 
\t background: #E9B6B0; 
 
\t pointer-events: none; 
 
} 
 

 
.dropdown:hover::after { 
 
\t color: white; 
 
} 
 
.dropdown::after { 
 
\t -webkit-transition: .25s all ease; 
 
\t -o-transition: .25s all ease; 
 
\t transition: .25s all ease; 
 
}
<div class="dropdown"> 
 
\t <select id="genre" onchange="filterConcerts()" value="default"> 
 
\t \t <option value="default">Sjanger</option> 
 
</div>

+0

うわー、ありがとう!それは仕事をした! –

+1

お寄せください。 :) –

関連する問題