Blog for web developers

Custom select box with css

Select box is one of the element of HTML. Sometimes we need to style this select element in such a way that it loses its existing appearance. We can easily style the select box with css but hiding the arrow in cross browser is the thing we need to do. Well for chrome you can easily hide it with simple css code.

Default select element

Select arrow hide in chrome.


select {
     -webkit-appearance: none;
     appearance: none;
}

But with to make it cross browser, above code will not work. Building a custom select box with css is not a hard job but requires an extra markup. I have used image to hide the arrow. But you can try with icons fonts, custom arrow or background color.

Custom select box with css

HTML


<label class="field select">
     <select id="state" name="state">
          <option value="">State</option>
          <option value="New York">New York</option>
     </select>
     <i class="arrow double"></i>
</label>

css


.select {
    display: block;
    position: relative;
}
.select>select {
    display: block;
    width: 100%;
    padding: 13px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    text-indent: .01px;
    text-overflow: '';
    z-index: 10;
    margin: 0;
    background: #ececec;
    border: 0;
    color: black;
}
.arrow {
    position: absolute;
    top: 0;
    right: 0;
    color: #b5c1c7;
    pointer-events: none;
    z-index: 16;
    background: url("dropdown.png") no-repeat right top;
    height: 44px;
    width: 47px;
}


DEMO

Santosh Shah

I am a JavaScript developer having enthusiasm on most frontend skills like JavaScript, HTML, CSS, SASS, node, gulp, angular etc. I love exploring new techniques and like to learn new technologies to keep my self up to date.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.