###IE9でのプルダウンのデザインを変えたい
IE9のプルダウンのデザインを作成しているのですが、IE9ではデフォルトのスタイルが見えてしまい
デザインが再現できません。
調べるとデフォルトのプルダウンのデザインはIE9だと変えることができないとありました。。
どうにか変える方法はありませんか。
ハックを使っても矢印のデザインを変えることができませんでした。
sassで書いてcssにコンパイルさせています。
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
↓これを書いても駄目でした。
css
1select { 2 font-size: inherit; 3 box-sizing: content-box; 4 margin: 0; 5 padding: 0; 6 vertical-align: middle; 7 color: inherit; 8 border: 0; 9 border-radius: 0; 10 background: none transparent; 11 -moz-appearance: none; 12 -webkit-appearance: none; 13 appearance: none; 14} 15 16.pulldown { 17 overflow: hidden\9; 18 background: none; 19} 20 21.pulldown > select { 22 width: 130%\9; 23 /* UI分を伸ばす */ 24 background-color: red\9; 25} 26
ここまでは反映される
css
1.select-box-basic { 2 width: 144px; 3 height: 33px; 4 padding-left: 8px; 5 border: solid 1px #bfbfbf; 6 border-radius: 0; 7 background: url(../images/arrow.png) no-repeat; 8 background-color: #fff; 9 background-position: 90% 50%; 10 -webkit-appearance: none; 11 -moz-appearance: none; 12 appearance: none; 13} 14 15@media (max-width: 767px) { 16 .select-box-basic { 17 line-height: 1rem; 18 width: 192px; 19 height: 30px; 20 padding: .2rem .5rem; 21 vertical-align: top; 22 letter-spacing: 1px; 23 color: #454545; 24 border: 1px solid #a5a8a8; 25 border-radius: 6px; 26 background: url(../images/sp/arrow.png) no-repeat; 27 background-color: #fff; 28 background-position: right center; 29 background-size: 30px 45px; 30 box-shadow: 0 1px rgba(0, 0, 0, 0.12) inset; 31 -webkit-appearance: button; 32 } 33} 34 35
html
1<dl> 2 <dd> 3 <select name="daigaku" class="select-box-basic"> 4 <option value=""></option> 5 <option value="大学院">大学院</option> 6 <option value="大学">大学</option> 7 </select> 8 </dd> 9</dl>
###補足情報(言語/FW/ツール等のバージョンなど)
崩れている画面:IE9
言語:HTML5 CSS3
ツール:atom Git gulp
Sass自体の質問を除き、基本的にはCSSにコンパイルしたものを掲載しましょう。
回答1件
あなたの回答
tips
プレビュー