選択ドロップダウンで「オプション」値のスタイルを設定するにはどうすればよいですか？

Question

私はこのselectボックスにoptionタグを書式化しようとしていますが、それをクリックするとオプションタグは選択ボックスよりも広いものの、同じでなければなりません。それはCSSを介して起こることは可能ですか？

ここでは、現在進行中です：あなたはまた、ご希望の背景画像が含まれている擬似要素と協力して何ができるかhttp://codepen.io/anon/pen/aBrzqz

.search { 
 
    border: 1px solid #ccc; 
 
    width: 250px; 
 
    overflow: hidden; 
 
    background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    float: left; 
 
} 
 
.search select { 
 
    padding: 10px 18px; 
 
    height: 55px; 
 
    width: 110%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    cursor: pointer; 
 
} 
 
.search select .option { 
 
    padding: 10px 18px; 
 
    width: 250px; 
 
}

<div class="search"> 
 
    <select> 
 
    <option value="" class="option">Choose something</option> 
 
    <option value="">One</option> 
 
    <option value="">Two</option> 
 
    <option value="">Three</option> 
 
    </select> 
 
</div>

Answer 1

CSSの最後のスタイルは、デフォルトのドロップダウンaroowを隠すだけのカスタム1を示しています。

.search { 
 
    border: 1px solid #ccc; 
 
    width: 250px; 
 
    overflow: hidden; 
 
    background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    float: left; 
 
} 
 
.search select { 
 
    padding: 10px 0px; 
 
    height: 55px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    cursor: pointer; 
 
} 
 
.search select .option { 
 
    padding: 10px 0px; 
 
    width:100%; 
 
} 
 
select { 
 
-webkit-appearance: none; 
 
-moz-appearance: none; 
 
appearance: none; 
 
}

<div class="search"> 
 
    <select> 
 
    <option value="" class="option">Choose something</option> 
 
    <option value="">One</option> 
 
    <option value="">Two</option> 
 
    <option value="">Three</option> 
 
    </select> 
 
</div>

Answer 2

。

.search { 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    width: 250px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    float: left; 
 
} 
 
.search:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    width: 10%; 
 
    height: 100%; 
 
    background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%; 
 
} 
 
.search select { 
 
    padding: 10px 18px; 
 
    height: 55px; 
 
    width: 110%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    cursor: pointer; 
 
} 
 
.search select .option { 
 
    padding: 10px 18px; 
 
    width: 250px; 
 
}

<div class="search"> 
 
    <select> 
 
    <option value="" class="option">Choose something</option> 
 
    <option value="">One</option> 
 
    <option value="">Two</option> 
 
    <option value="">Three</option> 
 
    </select> 
 
</div>

Answer 3

はまあ、別のあなたは、あなたのbackground positionを設定し、以下のようにtopでimgすることにより、その選択矢印を非表示にすることができますselectにnoneにappearanceを設定する1 optionあり

.search { 
 
    border: 1px solid #ccc; 
 
    width: 250px; 
 
    overflow: hidden; 
 
    background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 100.4% 48%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    float: left; 
 
} 
 

 
.search select { 
 
    padding: 10px 18px; 
 
    height: 55px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    cursor: pointer; 
 
} 
 

 
.search > select > .option { 
 
    padding: 10px 18px; 
 
     width: 250px; 
 
}

<div class="search"> 
 
    <select> 
 
\t \t \t  <option value="" class="option">Choose something</option> 
 
\t \t \t  <option value="">One</option> 
 
\t \t \t  <option value="">Two</option> 
 
\t \t \t  <option value="">Three</option> 
 
\t \t \t </select> 
 
</div>