スマホだとダメ？

ちょろめでしか見てない

by ethertank

HTML

<select>
<option>オプションA</option>
<option>オプションB</option>
<option>オプションC</option>
<option>オプションD</option>
<option>オプションEEEEEEEEEEEEEEEEEEEE</option>
</select>

CSS

body{
    background: darkblue;
    color: #fff;
}

select {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    
    border: 4px solid #fff;
    padding: 2px 32px 2px 2px;
    width: 125px;

    color:#fff;
    background-color: darkblue;
    background-image: -webkit-linear-gradient(top,#ccc,#ccc);
    background-image:    -moz-linear-gradient(top,#ccc,#ccc);
    background-image:     -ms-linear-gradient(top,#ccc,#ccc);
    background-image:      -o-linear-gradient(top,#ccc,#ccc);
    background-image:         linear-gradient(to bottom,#ccc,#ccc);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 30px 100px;
    
    -webkit-text-overflow: ellipsis;
            text-overflow: ellipsis;
}