Bloggerのラベルをプルダウン化とデザイン変更

<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'> <select onchange='location=this.options[this.selectedIndex].value;'>
   <option>ラベルを選択</option>
<b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select> <b:include name='quickedit' /> </div>
  </b:includable>
</b:widget>

#Label1 {
position: relative;
margin-bottom: 0;
margin-top: 0;
}
#Label1 select {
width: 100%;
height: 52px;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis; /* はみ出し処理 */
border: none; /* 線なし */
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none; /* 矢印消す */
appearance: none; /* 矢印消す */
padding: 8px 0px 8px 1em; /* 余白[上][右][下][左] */
font-family : inherit;
font-size: 14px; /* 文字サイズ */
color: #757575; /* 文字の色 */
margin-left: 8px;
margin-bottom: 0;
margin-top: 0;
}
/* 矢印消すIE用 */
#Label1 select::-ms-expand {
display: none;
}
#Label1 option {
pointer-events: none;
}
/* 疑似要素 Labelの文字と背景色 */
#Label1::after{
position: absolute;
border: 1px;
border: 1px solid #F3F3F3;
border-radius: 6px;
width:95%;
height:35px;
white-space: pre-wrap; /* content内のスペースを有効に */
content: '    Label';
top: 55px; /* 位置調整 */
left: 8.5px; /* 位置調整 */
font-size: 14px; /* 文字サイズ */
color: #757575; /* 文字の色 */
background: #F6F5F5; /* 背景色 */
line-height: 35px; /* 縦位置中央に */
pointer-events: none; /* 擬似要素が上にあってもクリックを有効に */
}
/* 疑似要素 右の▼マーク */
#Label1::before {
position: absolute;
top: 70px; /* 位置調整 */
right: 22px; /* 位置調整 */
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #474A4D;  /* 色 */
z-index: 1; /* 重ね合わせの順を上へ */
pointer-events: none; /* 擬似要素が上にあってもクリックを有効に */
}