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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

1回答

1472閲覧

プルダウンメニューを押下後、メニュー矢印を最初の状態に戻したい

mariueda

総合スコア8

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/05/25 07:59

編集2022/01/12 10:55

プルダウンメニューを押下後に矢印と背景が変化し、
選択後はじめの矢印の向きと背景に戻したいです。
参考URLをもとに作成しましたが、動きをJSを使わずCSSで行いたいです。

参考:「標準的なプルダウンだが、選択メニューの形式をカスタマイズ。」
https://kodocode.net/design-css-selectlist/

擬似クラスを設ければうまくいくのでしょうか。
ご教授をお願いします。

HTML

1 <div class="result"> 2 <p>表示件数</p> 3 <select class="classic"> 4 <option>10</option> 5 <option>20</option> 6 <option>30</option> 7 </select> 8 </div>

css

1.result { 2 display: flex; 3 justify-content: flex-end; 4 } 5 6 .result p { 7 margin-top: 3.5%; 8 font-size: 11px; 9 } 10 11 .result select { 12 /* styling */ 13 background-color: white; 14 border: thin solid #C4C4C4; 15 border-radius: 4px; 16 display: inline-block; 17 font: inherit; 18 line-height: 1.5em; 19 padding: 0.5em 3.5em 0.5em 1em; 20 /* reset */ 21 margin: 0; 22 -webkit-box-sizing: border-box; 23 -moz-box-sizing: border-box; 24 box-sizing: border-box; 25 -webkit-appearance: none; 26 -moz-appearance: none; 27 } 28 /* arrows */ 29 30 .result select.classic { 31 background-image: linear-gradient(58deg, transparent 50%, #222 50%), linear-gradient(120deg, #222 50%, transparent 50%), linear-gradient(to right, #DEDEDE, #DEDEDE); 32 background-position: calc(100% - 19px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; 33 background-size: 5px 5px, 5px 5px, 2.5em 3em; 34 background-repeat: no-repeat; 35 margin-bottom: 14px; 36 margin-left: 10px; 37 } 38 39 .result select.classic:focus { 40 background-image: linear-gradient(58deg, white 50%, transparent 50%), linear-gradient(120deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray); 41 background-position: calc(100% - 16px) 1em, calc(100% - 20px) 1em, 100% 0; 42 background-size: 5px 5px, 5px 5px, 2.5em 2.5em; 43 background-repeat: no-repeat; 44 border-color: grey; 45 outline: 0; 46 }

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

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

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

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

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

guest

回答1

0

「:active」を使ってみてはいかがでしょうか?

CSS

1.result select.classic:active { 2 background-image: linear-gradient(58deg, white 50%, transparent 50%), linear-gradient(120deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray); 3 background-position: calc(100% - 16px) 1em, calc(100% - 20px) 1em, 100% 0; 4 background-size: 5px 5px, 5px 5px, 2.5em 2.5em; 5 background-repeat: no-repeat; 6 border-color: grey; 7 outline: 0; 8}

投稿2020/05/25 14:18

new1ro

総合スコア4528

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問