質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

3015閲覧

IE9でのプルダウンのデザイン

takamiii_158cm

総合スコア84

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/11/09 07:43

編集2016/11/09 09:02

###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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gin

2016/11/09 08:20

Sass自体の質問を除き、基本的にはCSSにコンパイルしたものを掲載しましょう。
guest

回答1

0

ベストアンサー

IE10以上ならなんとかする手段もありますが、
IE9以下の矢印は消せません。
select要素を使う以上、IE9以下の見た目は諦めるしかないかと。。。

投稿2016/11/09 13:15

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takamiii_158cm

2016/11/10 03:27

そうですよね。。 色々作業してPCだと見えなくする(隠す)事はできたのですがIE9のスマホだとやはり見えているので仕方ないですね。 クライアントの現行サイトでも見えていたのでまあいいかと思いました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問