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

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

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

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

HTML5

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

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

safariのみselectにCSSが効かない

DaichiNakajima
nitori-kun

総合スコア53

CSS3

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

HTML5

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

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

0クリップ

514閲覧

投稿2022/08/03 08:45

編集2022/08/03 10:32

前提

selectタグでドロップダウンメニューを内包したWebサイトを作っています。

実現したいこと

safariを使った時だけ、selectにCSSが効いていないように感じます。また、ドロップダウンメニューの位置もずれて表示されています。これをFirefoxやChromeのブラウザと同じようにしたいです。

該当のソースコード

searchFromMakers.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <title>searchFromMakers</title> <style> #searchFromMakers{ display: flow-root;/*prevent margin offset*/ box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5); width: 415px; } #searchFromMakers h1{ margin: 0; margin-left: 15px; color: rgb(121, 121, 121, 0.5); } .options{ display: flex; padding-left: 10px; margin-top: 10px; } .options p{ margin: 0; padding-left: 10px; } .options select{ margin-left: 5px; color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ } /*_::-webkit-full-page-media, :root, .options select{/*0803*/ /*margin-left: 5px; color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ /*}*/ #showLine{ display: flex; background-color: rgb(121, 121, 121, 0.1); padding-left: 10px; margin-top: 20px; } .carType_mini{ width: 122px; margin: 5px; } .carType_mini img{ border: 1px solid #797979; } .lower_mini{ display: flex; justify-content: space-between; height: 20px; } .lower_mini p{ width: 100%; margin: 0; font-size: 12px; } input[type=checkbox] { display: none; } .checkbox{ box-sizing: border-box; display: inline-block; margin-right: 10px; position: relative; width: 15px; cursor: pointer; } .checkbox::before { border: 1px solid #797979; content: ''; display: block; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; width: 16px; } .checkbox::after { border-right: 3px solid #ed7a9c; border-bottom: 3px solid #ed7a9c; content: ''; display: block; height: 9px; left: 10px; margin-top: -7px; opacity: 0; position: absolute; top: 50%; transform: rotate(45deg); width: 5px; } input[type=checkbox]:checked + .checkbox::after { opacity: 1; } #optionSearch h2{/*0723 ここが効いていない*/ margin: 0; border-left: 5px solid red; padding-left: 10px; color: red; } select{ cursor: pointer; } .options, .mission{/*同じだから消せる*/ display: flex; padding-left: 10px; margin-top: 10px; } .options p{/*同じだから消せる*/ margin: 0; padding-left: 10px; } .options select{/*同じだから消せる*/ margin-left: 5px; color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ } .mission p{/*同じだから消せる*/ padding-left: 10px; } /*toggle switch*/ .toggle { position: relative; width: 90px; height: 24px; margin-top: 15px; margin-left: 15px; user-select: none; cursor: pointer; } .toggle input[type=checkbox] { display: none; } .toggle span { position: absolute; top: 7px; font-size: 12px; font-weight: bold; line-height: 1; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .toggle span:nth-of-type(1) { right: 16px; color: rgba(0, 0, 0, 0.175); } .toggle span:nth-of-type(2) { left: 16px; color: white; z-index: 2; } .toggle.checked span:nth-of-type(1) { right: 15px; color: white; z-index: 2; } .toggle.checked span:nth-of-type(2) { left: 15px; color: rgba(0, 0, 0, 0.175); } .toggle:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50px; display: block; background: #FFF; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; border: 1px solid rgb(121, 121, 121, 0.5); } .toggle:after { content: ""; position: absolute; width: 45px; height: 24px; display: block; border-radius: 50px; background: #336666; box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3); -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; margin-top: 1px;/*prevent the effect of border*/ } .toggle.checked:before { background: #FFF; } .toggle.checked:after { left: 46px;/*moving*/ box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5); } .searchButton{/*同じから消す*/ margin: 0 auto;/*center the box*/ margin-bottom: 20px; text-align: center;/*center the a elements a*/ background: #336666; padding-top: 10px; width: 50%; height: 35px; } .searchButton a{/*同じから消す*/ text-decoration: none; color: #FFF; } .searchButton img{/*同じから消す*/ width: 15px; height: 15px; margin-left: 10px; } @media (min-width: 1025px) {/*PC版*/ } @media screen and (max-width:1024px) {/*スマホ・タブレット版*/ } </style> </head> <body> <div id="searchFromMakers"> <h1>メーカから探す</h1> <div class="options"> <p>メーカー</p> <select name="maker" onchange="changeColor(this)"> <option class="example1" value="">日産</option> <option id="nissan">日産</option> <option id="toyota">トヨタ</option> <option id="matsuda">マツダ</option> <option id="daihatu">ダイハツ</option> <option id="suzuki">スズキ</option> </select> <p>車種</p> <select name="model" onchange="changeColor(this)"> <option id="example3" value="">軽自動車</option> <option id="kei">軽自動車</option> <option id="compact">コンパクトカー</option> <option id="miniban">ミニバン</option> <option id="sedan">セダン</option> <option id="qube">クーペ</option> <option id="stationWagon">ステーションワゴン</option> <option id="SUV">SUV・クロカン</option> <option id="openCar">オープンカー</option> <option id="oneBox">ワンボックス</option> </select> </div> <div id="showLine"> <div class="carType_mini"> <img src="assets/img/nissan_dayz_roox.png" alt="nissan_dayz_roox"> <div class="lower_mini"> <p>デイズ ルークス</p> <input type="checkbox" id="days_roox_check" name="check"><label for="days_roox_check" class="checkbox"></label> </div> </div> <div class="carType_mini"> <img src="assets/img/nissan_dayz.png" alt="nissan_dayz"> <div class="lower_mini"> <p>デイズ</p> <input type="checkbox" id="dayz_check" name="check"><label for="dayz_check" class="checkbox"></label> </div> </div> <div class="carType_mini"> <img src="assets/img/nissan_clipper.png" alt="nissan_clipper"> <div class="lower_mini"> <p>クリッパー</p> <input type="checkbox" id="clipper_check" name="check"><label for="clipper_check" class="checkbox"></label> </div> </div> </div> <div id="optionSearch"> <h2>オプション検索</h2> <div class="options"> <p>排気量 </p> <select name="displacement" onchange="changeColor(this)"> <option id="example2" value="">660CC</option> <option id="1500">1500CC</option> <option id="2000">2000CC</option> <option id="3000">3000CC</option> </select> </div> <div class="mission"> <p>AT/MT</p> <div class="toggle"> <input type="checkbox" name="check" /> <span>MT</span> <span>AT</span> </div> </div> </div> <div class="searchButton"> <a href="history.html"><span>この条件で探す</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a> </div> </div> <script type="text/javascript"> 'use strict'; //options function changeColor(hoge){ if( hoge.value == 0 ){ hoge.style.color = ''; }else{ hoge.style.color = 'black'; } } //toggle switch $(".toggle").on("click", function() { $(".toggle").toggleClass("checked"); if(!$('input[name="check"]').prop("checked")) { $(".toggle input").prop("checked", true); } else { $(".toggle input").prop("checked", false); } }); </script> </body> </html>

試したこと

::-webkit-full-page-media, :root, .options select{
margin-left: 5px;
color: rgb(121, 121, 121, 0.5);
}
のように、
::-webkit-full-page-media, :rootをつけてみました。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

退会済みユーザー

退会済みユーザー

2022/08/03 09:16

option要素のidがダブりまくり。nameとidを取り違えていませんか。idがダブりまくりなので、htmlの解釈がおかしくなってる可能性が考えられます。validatorを試してみてください。https://validator.w3.org/#validate_by_input
DaichiNakajima

2022/08/03 10:33

idを全て変えて試してみました。(htmlコードの変更) idのダブりによるhtmlの解釈は問題ないと考えられます。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。