수직으로 정렬 텍스트

Question

나는 다음과 같은 CSS가있는 HTML을 선택 요소가 :

.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;} 

문제는 심지어 크롬에 생각 텍스트가 수직으로 파이어 폭스 정렬되지 않는 것입니다. 데모는 jsfiddle을 참조하십시오.

텍스트를 모든 브라우저에서 세로로 정렬하려면 어떻게해야합니까?

편집 :이 질문을하기 전에 패딩을 수정하려고 시도했지만 작동하지 않습니다.

감사합니다.

Answer 1

추가 된 패딩은 FFox에서 도움이되며 크롬은 마음에 들지 않습니다.

.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; 
} 

Answer 2

당신이 총 통제를 원하는 경우에, 당신의 입력이가 만드는 건의 할 것 "-webkit-외관 : 없음;" 당신이 할 수있는, 웹킷 모양으로

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

: 하나 개의 픽셀이 파이어 폭스에서 당신을 귀찮게하는 경우

가

.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); 
} 

그리고, 이런 식으로 뭔가를 사용하여 다음

는 모양을 재현 할 수있는 CSS입니다 어떤 브라우저에서나 원하는 것처럼 보이게하십시오.

편집 : 내 사이트에서 arrows.png를 다운로드 한 다음 로컬로 사용하십시오. 조금만 기다려주세요.