CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraphtml-select
Dr.Kameleon
Dr.Kameleon

Reputation: 22810

Styling Select element

OK, so here's the situation:

The issue:

Any ideas?

HTML:

<div id="styled-select">
    <select>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
    </select>
</div>

CSS:

select {
    border:0; 
    border-radius: 0;
    background:transparent; 
    outline:none; 
    box-shadow:none; 
    -webkit-box-shadow:none; 
    text-align:right;
    -webkit-appearance: none;

    padding-top: 1px;
    font-size: 13px;
    padding-left: 10px;
}

#styled-select:hover {
    color: #666;
}

#styled-select:after {
    content:"\e113";
    font-family:"Glyphicons Halflings";
    line-height:1;
    display:inline-block;
    margin-left:5px;
}

Demo/Fiddle: http://jsfiddle.net/tnzbL1hp/

Upvotes: 1

Views: 209

Answers (2)

Dr.Kameleon
Dr.Kameleon

Reputation: 22810

And another solution I just came up with:

    #styled-select:after {
        content:"\e113";
        font-family:"Glyphicons Halflings";
        line-height:1;
        display:inline-block;

        pointer-events:none;

        width: 23px;
        height: 23px;
        position: absolute;
        top: 8px;
        right: 4px;

    }

And add some padding-right to the <select> element...

Upvotes: 0

Beowolve
Beowolve

Reputation: 558

Added this:

select {
    margin-right:-30px;
    padding-right:25px;
}

and

#styled-select:after {
    position:relative;
    z-index:-1;
}

http://jsfiddle.net/tnzbL1hp/1/

Upvotes: 2

Related Questions