CODEWITHSUNDEEP
javascripthtmlcss
Wenhao Cen
Wenhao Cen

Reputation: 90

css how to style a select box

I've successfully style a select box. However, I have trouble handling the overflow issue. Please see the image.

Whenever i try too long into the select field, the text cover the dropdown icon(i use an background image for that). Anybody know how to make dropdown icon to cover the text if the text field is too long? I really appreciate it!

Upvotes: 3

Views: 1482

Answers (4)

Yenn
Yenn

Reputation: 929

easy

HTML 

<select>
    <option>blabòaablabmalkbmakbvnozeetjztjzrjdjttjtjetjtjetja</option>
</select>

CSS 

select {
    max-width:200px; /* just my style, edit to what you want */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:url('http://pediatrics.evms.edu/assets/images/icon_arrow_down.png'); /* the first icon on google :) replace with your own */
    background-repeat:no-repeat;
    background-position:right;
    padding-right:15px; /* this do the trick */
}

FIDDLE

Upvotes: 2

DarkAjax
DarkAjax

Reputation: 16223

You can set the padding, like:

input[type="text"] // Or whatever selector you're using
{
    padding-right: 15px;
}

So the text doesn't overlap with your background image...

Demo: http://jsfiddle.net/darkajax/nekdS/

Upvotes: 2

Max
Max

Reputation: 165

Add something like an ID to it then do this:

CSS:

#id {
border: 2px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border-color: black;
and so on...
}

Upvotes: 0

Santiago Baigorria
Santiago Baigorria

Reputation: 696

you should first start with a to correct in every browser. then add the padding to let the arrow be alone in the right side. try it.

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

and then add your own styles, such as background border, padding, box-shadow and whatever....

good luck!

Upvotes: 2

Related Questions