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>ベビー&マタニティ</option>
50 <option>ファッション</option>
51 <option> レディース</option>
52 <option> メンズ</option>
53 <option> キッズ&ベビー</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>