선택 상자에서 공백을 제거하십시오.

Question

양식에 입력 필드가 몇 개 있습니다. 나는 그 (것)들에게 5px의 모든 패딩을 주었지만 선택 박스는 내부에 추가적인 공간을 가지고있는 것처럼 보였다. 패딩, 여백 또는 텍스트 들여 쓰기로 인한 것이 아닙니다. 텍스트 정렬이 남아 있습니다. 이걸 없애는 방법이 있습니까?

여기에 내 코드를 다음과 같습니다. 하단에는 바이올린 링크가 있습니다.

CSS

<div> 
    <select> 
     <option>Test1</option> 
     <option>Test2</option> 
     <option>Test3</option> 
     <option>Test4</option> 
    </select> 
</div> 
<div> 
    <input type="text" value="Test" /> 
</div> 

https://jsfiddle.net/64ppa5f5/

PS

input[type=text], 
select { 
    padding:5px; 
} 
select { 
    border:solid 1px #555; 
    padding:5px; 
} 

HTML :

가 나는 또한 줌을 shecked하고 100 %입니다.

Answer 1

브라우저 렌더링 자체에는 뭔가가 있습니다. 자세한 내용은이 질문에 대한 답변을 참조하십시오. Text Padding in Select Boxes

요약하면이 작업을 수행하지 않아야합니다.

Answer 2

보고있는 패딩은 브라우저의 특정 스타일 시트에서 나옵니다. 선택 상자에서 공백을 제거하려면 다음 스타일을 추가하십시오.

input[type=text], 
select { 
    padding:5px; 
} 

select { 
    -webkit-appearance: none; 
    -moz-appearance : none; 
    border:solid 1px #555; 
    border-radius:3px; 
    padding:5px; 
} 

가 문제가 재현 할 곳이 link