圓角select下拉菜單

分享一段代碼執行個體，它實作了圓角效果的select下拉菜單。

代碼執行個體如下:

<code>&lt;!doctype html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;螞蟻部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code><code>&gt;</code>

<code>select{</code>

<code>  </code><code>border:1px solid #c9c9c9;</code>

<code>  </code><code>background-color:#fff;</code>

<code>  </code><code>color:#666;</code>

<code>  </code><code>height:28px;</code>

<code>  </code><code>line-height:28px;</code>

<code>  </code><code>padding:4px 6px;</code>

<code>  </code><code>font-size:14px;</code>

<code>  </code><code>border-radius:4px;</code>

<code>  </code><code>cursor:pointer;</code>

<code>  </code><code>outline:none;</code>

<code>}</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>select</code> <code>id</code><code>=</code><code>"antzone"</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"1"</code><code>&gt;螞蟻部落一&lt;/</code><code>option</code><code>&gt;       </code>

<code>  </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"2"</code><code>&gt;螞蟻部落二&lt;/</code><code>option</code><code>&gt;       </code>

<code>&lt;/</code><code>select</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

原文釋出時間為：2017-3-8

本文作者：admin

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落