CODEWITHSUNDEEP
htmlcss
frenchie
frenchie

Reputation: 51927

vertically aligning text in HTML select element cross browsers

I have an HTML select element with the following CSS:

.MySelect{
    padding: 0px 0px 0px 4px;
    background: white;
    width:180px;
    border: 2px solid red;
    box-shadow: 2px 2px 10px lightgray;
    border-radius: 5px;
    height: 26px;
    line-height: 26px;
    font-family: "Trebuchet MS";
    font-size: 13px;
    margin:20px 20px;}

The problem is that the text is not vertically aligned in Firefox even thought it is in Chrome. See the jsfiddle here for demo.

How do I make the text vertically aligned across all browsers?

Edit: I tried modifying the padding before asking this question and that doesn't work.

Thanks.

Upvotes: 1

Views: 6436

Answers (2)

Slavenko Miljic
Slavenko Miljic

Reputation: 3846

The added padding helps in FFox and chrome doesn't seem to mind.

.MySelect{
        padding: 2px 0px 2px 4px;
        background: white;
        width:180px;
        border: 2px solid red;
        box-shadow: 2px 2px 10px lightgray;
        border-radius: 5px;
        font-family: "Trebuchet MS";
        font-size: 13px;
        margin:20px 20px;
}

Upvotes: 3

ntgCleaner
ntgCleaner

Reputation: 5985

If you want total control, I would suggest making your input have a "-webkit-appearance:none;"

Here is the CSS to recreate the appearance:

.MySelect {
width: 180px;
height: 26px;
padding:0px 0px 0px 4px;
border: 2px solid red;
box-shadow: 2px 2px 10px lightgray;
border-radius: 5px;
font-family: "Trebuchet MS";
font-size: 13px;
-webkit-appearance: none;
background: #E7E7E7;
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -moz-linear-gradient(top, #E7E7E7 0%, #FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E7E7E7), color-stop(100%,#FEFEFE));
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -webkit-linear-gradient(top, #E7E7E7 0%,#FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -o-linear-gradient(top, #E7E7E7 0%,#FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -ms-linear-gradient(top, #E7E7E7 0%,#FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, linear-gradient(to bottom, #E7E7E7 0%,#FEFEFE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#fefefe',GradientType=0 );
}

And then if that one pixel is bothering you in FireFox, Use something like this:

@-moz-document url-prefix() {
.MySelect {
    padding:1px 0px 0px 4px;
}
}

With webkit appearance, you can make it look like whatever you want in any browser.

EDIT: Make sure you DOWNLOAD the arrows.png from my site and then use it locally, I will only have it there for a little while.

Upvotes: 2

Related Questions