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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

3804閲覧

セレクトボックスのCSSの設定方法を教えてください。

smileheart

総合スコア17

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/21 23:11

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

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

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

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

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

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

guest

回答2

0

CSSフレームワークを入れるか、それが難しいのであればCSSフレームワークの作りを真似るかのどちからですね。(または、IEは諦める)
ブラウザ間の仕様の違いを全て吸収しながら自作するのは一筋縄ではいかないもので、無限に時間があるのであれば何とかならないことはないものの、現実問題非常に難しいものです。
そこだけに時間をかけていてもWebサイトはそこだけで出来ているわけではないですし、ここができたらここがずれた・・などやっているうちに投げ出したくなることもままあります。
そういったストレスを限りなく軽減してくれるのがCSSフレームワークなりプラグインです。
まずはデフォルトのまま使用し、そこから自身がやりたいようにカスタマイズしていくのが吉です。

投稿2018/10/21 23:43

編集2018/10/21 23:44
m.ts10806

総合スコア80765

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

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

smileheart

2018/10/21 23:48

ありがとうござます。 具体的に、どのフレームワークを真似ればいいのでしょうか? また、Winでは、IEだけではなく、Vhromeでも駄目です。
m.ts10806

2018/10/21 23:54 編集

VhromeではなくChromeですね。 > どのフレームワーク 好みや要件次第です。ここで「どれがいい」というのは現在の内容だけでは伝えられません。 ただ、既に回答にあるように「制御できる範囲に限りがある」わけですが、その機能についてはどのCSSフレームワークでも 仕様の違いを吸収するべきものであるという認識で作られているため、 ”どのCSSフレームワークでも良い” です。多少合わないところは自身でカスタマイズすれば良いだけです。 どれでも良いので1つ真似てみては? 私の場合だと、「真似る」ではなく「CSSフレームワークを入れる」を選択しますけど。 もし自作したければセレクトボックスの動作を考えてみれば良いですよ。 たぶんここで色々説明するより試された方が良いです。私がこの場で説明するより優良な記事やコードは世の中に溢れています。 溢れているので好みや要件がわからない段階では紹介は控えさせていただきます。
smileheart

2018/10/22 00:37

ありがとうございます。 今の不具合が改善されているフレームワークがわかりません。 すでに色々試していますし、調べてもいますがわからず困っています。 また、初心者ですので、フレームワークといわれても、Bootstrap程度しかわかりません。 これで、できるのでしょうか?? その設定方法から始めないといけないので、できれば、ここで教えて欲しいです。
m.ts10806

2018/10/22 00:40

公式でも何でも記事読んでされた方が良いです。ここでなんでもかんでも聞いてしまうと自分では何もできなくなってしまいますよ。 どのような表示になるか見たいだけなら公式サイトをいろんなブラウザでアクセスすれば良いだけですし
smileheart

2018/10/22 01:43

了解です。ありがとうございます(^∇^)
guest

0

ブラウザ組み込みの<select>は、OSにあるウィジェットを呼び出しているので、制御できる範囲に限りがあります

全ブラウザで完璧に挙動を揃えたいのなら、標準の<select>は諦めて、JavaScriptですべて描画する他ないでしょう。

投稿2018/10/21 23:20

maisumakun

総合スコア145123

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

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

smileheart

2018/10/21 23:22

ありがとうござます。 初心者のため、JavaScriptでの設定方法がわかりません。 どの様にすればいいでしょうか?
maisumakun

2018/10/21 23:25

自分で作るのは難しいので、既存のウィジェットを探してみるほうがいいでしょう。 (ただし、質問を見た雰囲気「上からの指示がある」環境のようなので、勝手にライブラリを入れられないのであればその手も使えないです)
smileheart

2018/10/21 23:49

上からの指示はないです。 既存のウィジェットとは、どの様に探すのでしょうか? 初心者のため、教えていただければ嬉しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問