html - How can I put this option underneath?CSS -

i have select input example

jsfiddle

code html:

<div class="select-style3">         <select name="mailing_state" id="state" class=" select-full required-input copy-data">             <option value="">select</option>             <option value="al">alabama</option>             <option value="ak">alaska</option>             <option value="az">arizona</option>             <option value="ar">arkansas</option>             <option value="ca">california</option>             <option value="co">colorado</option>             <option value="ct">connecticut</option>             <option value="de">delaware</option>             <option value="dc">district of columbia</option>             <option value="fl">florida</option>             <option value="ga">georgia</option>             <option value="hi">hawaii</option>             <option value="id">idaho</option>             <option value="il">illinois</option>             <option value="in">indiana</option>             <option value="ia">iowa</option>             <option value="ks">kansas</option>             <option value="ky">kentucky</option>             <option value="la">louisiana</option>             <option value="me">maine</option>             <option value="md">maryland</option>             <option value="ma">massachusetts</option>             <option value="mi">michigan</option>             <option value="mn">minnesota</option>             <option value="ms">mississippi</option>             <option value="mo">missouri</option>             <option value="mt">montana</option>             <option value="ne">nebraska</option>             <option value="nv">nevada</option>             <option value="nh">new hampshire</option>             <option value="nj">new jersey</option>             <option value="nm">new mexico</option>             <option value="ny">new york</option>             <option value="nc">north carolina</option>             <option value="nd">north dakota</option>             <option value="oh">ohio</option>             <option value="ok">oklahoma</option>             <option value="or">oregon</option>             <option value="pa">pennsylvania</option>             <option value="ri">rhode island</option>             <option value="sc">south carolina</option>             <option value="sd">south dakota</option>             <option value="tn">tennessee</option>             <option value="tx">texas</option>             <option value="ut">utah</option>             <option value="vt">vermont</option>             <option value="va">virginia</option>             <option value="wa">washington</option>             <option value="wv">west virginia</option>             <option value="wi">wisconsin</option>             <option value="wy">wyoming</option>       </select>    </div> 

code css:

.select-style3 {     background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 70%, white 70%, gray 71%, lightgray 71%, lightgray 100%);     background-position: 80px center, center center;     background-repeat: no-repeat;     /*border: 1px solid #ccc;*/     border-radius: 3px;     margin: 0;     overflow: hidden;     padding: 0;     width: 113px;     height: 30px; } .select-style3 select {     padding: 5px 8px;     width: 100%;     border: none;     box-shadow: none;     background-color: transparent;     background-image: none;     -webkit-appearance: none;     -moz-appearance: none;     appearance: none; } .select-style3 select:focus {     outline: none; } 

if select list district of columbia see bad element seen ...

i wish pass underneath , bad ...

how can solve problem?

thanks in advance!

adjust width of element: width: 113px; narrow text.