MacのChrome では、以下の様にきれいに表示できるのですが、
Winのエッジだと、以下の様にきれいに表示されません。
WinのChromaでも同じです。
プルダウンの文字が拝見の白と重なって、みえなくなり困っています。
ソースは以下になりますが、
どうすればいいか教えてください。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<link href="style.css" rel="stylesheet"> 6<title>MJBセレクトボックス</title> 7</head> 8 9<body> 10<section> 11 <p>こちらのセレクトボックスを、各ブラウザで表示崩れのないよう修正お願いいたします。</p> 12 <div class="box"> 13 <select> 14 <option>みかん</option> 15 <option>いちご</option> 16 <option>りんご</option> 17 <option>ぶどう</option> 18 </select> 19 </div> 20</section> 21</body> 22</html> 23
CSS
1@charset "UTF-8"; 2/* CSS Document */ 3 4section{ 5 padding:20px; 6} 7 8.box{ 9 width:100px; 10 height:30px; 11 position: relative; 12 background-color: #4F5ADA; 13 color: #FFF; 14 padding-left:10px; 15 font-size:18px; 16} 17.box:before{ 18 position: absolute; 19 top: 0.7em; 20 right: 0.6em; 21 width: 0; 22 height: 0; 23 padding: 0; 24 content: ''; 25 border-left: 6px solid transparent; 26 border-right: 6px solid transparent; 27 border-top: 6px solid #FFF; 28 pointer-events: none; 29} 30 31select{ 32 outline:none; 33 width: 100%; 34 border: none; 35 background: none transparent; 36 color: inherit; 37 -webkit-appearance: button; 38 -moz-appearance: button; 39 appearance: button; 40} 41
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/21 23:48
2018/10/21 23:54 編集
2018/10/22 00:37
2018/10/22 00:40
2018/10/22 01:43