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

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

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

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

HTML5

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

Q&A

1回答

603閲覧

Amazonの検索フォームのセレクトボックスの動きを再現したいです。

kuta_wtnb

総合スコア7

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2018/11/24 15:52

アマゾンの検索フォームのセレクトボックスでカテゴリーを選択すると文字数に応じてセレクトボックスの幅が自動で調整されるのを再現したいです。
Amazon
イメージ説明
イメージ説明
できればCSSのみで再現できると良いのですが…

ご教授いただけますでしょうか?
よろしくお願いいたします。

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

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

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

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

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

NozomuIkuta

2018/11/24 15:59

今の質問のままだとteratailで推奨していない質問(https://teratail.com/help/avoid-asking)のうち「丸投げ」に該当してしまいます。どこまで調べたか(実装してみたか)載せた方がいいです。
退会済みユーザー

退会済みユーザー

2018/11/24 23:03

CSSだけしか使えない理由かなんかあるのでしょうか?
guest

回答1

0

CSSだけではできないと思います。

カテゴリーを選択すると文字数に応じてセレクトボックスの幅が自動で調整される

少なくとも上記の部分にはjavascriptを数行書く必要があると思われます。

↓幅を変える部分を模倣したもの

html

1<style> 2#searchSelect{ 3 position:absolute; 4 top:0; 5 left:0; 6 opacity:0; 7 cursor: pointer; 8 cursor: hand; 9} 10#search-label{ 11 background-color:#e9e9e9; 12 position:absolute; 13 display:inline-block; 14 top:0; 15 left:0; 16 font-size:11px; 17 color:#878787; 18 padding:8px 30px 8px 10px; 19 border-radius: 4px 0px 0px 4px ; 20} 21#search-label:before{ 22 content: ""; 23 position: absolute; 24 top: 15px; 25 right: 8px; 26 border-left: 5px solid transparent; 27 border-right: 5px solid transparent; 28 border-top: 5px solid #878787; 29} 30</style> 31 32<div id="search-label">すべて</div> 33<select id="searchSelect" onchange="labelChange();"> 34 <option selected="selected">すべてのカテゴリー</option> 35 <option>Amazon デバイス</option> 36 <option>Kindleストア </option> 37 <option>Prime Video</option> 38 <option>Alexaスキル</option> 39 <option>デジタルミュージック</option> 40 <option>Android アプリ</option> 41 <option></option> 42 <option>洋書</option> 43 <option>ミュージック</option> 44 <option>クラシック</option> 45 <option>DVD</option> 46 <option>パソコン・周辺機器</option> 47 <option>ラグジュアリービューティー</option> 48 <option>食品・飲料・お酒</option> 49 <option>ベビー&amp;マタニティ</option> 50 <option>ファッション</option> 51 <option>&nbsp;&nbsp;&nbsp;レディース</option> 52 <option>&nbsp;&nbsp;&nbsp;メンズ</option> 53 <option>&nbsp;&nbsp;&nbsp;キッズ&ベビー</option> 54</select> 55 56<script> 57var target = document.getElementById('searchSelect'); 58var searchLabel = document.getElementById('search-label'); 59target.style.width = searchLabel.clientWidth+'px'; 60target.style.height = searchLabel.clientHeight+'px'; 61function labelChange(){ 62 searchLabel.innerText = target.options[target.selectedIndex].text; 63 target.style.width = searchLabel.clientWidth+'px'; 64} 65</script>

投稿2018/11/25 04:15

colling

総合スコア798

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問