Last Updated: February 25, 2016
·
325
· merys

Styling select!

This morning I have read this article:

http://bavotasan.com/2011/style-select-box-using-only-css/

For compatibility with Firefox and IE (7/8) I have modified this code as below:

.styled-select {
        width: 280px;
        height: 30px;
        overflow: hidden;
        background: url(/images/arrow-right-grey.png) no-repeat 96% #FFFFFF;
        border: 1px solid #ccc;
        border-radius: 4px 4px 4px 4px;
        padding: 0px;
        margin-top: 10px;
    }

        .styled-select select {
            margin: 0px 0px 0px 0px;
            background: transparent;
            width: 310px;
            padding: 5px;
            font-size: 13px;
            height: 30px;
            -webkit-appearance: none;
            border: 0px;
        }

And now it's work!!!

The result:

Picture