How to style the "option" value in select dropdown?
<p>I'm trying to stylize <code>option</code> tags in this <code>select</code> box, but when I click on it option tags are wider than the select box, but they should be equal. Is it possible to make it happen via css? </p>

<p>Here's the current progress: <a href="http://codepen.io/anon/pen/aBrzqz" rel="nofollow noreferrer">http://codepen.io/anon/pen/aBrzqz</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="search"&gt;
  &lt;select&gt;
    &lt;option value="" class="option"&gt;Choose something&lt;/option&gt;
    &lt;option value=""&gt;One&lt;/option&gt;
    &lt;option value=""&gt;Two&lt;/option&gt;
    &lt;option value=""&gt;Three&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>