추가 이미지를 드롭 다운 화살표로 어떻게 추가합니까?

드롭 다운 화살표가있는 응용 프로그램을 만들었지 만, 화살표 크기가 너무 작습니다.추가 이미지를 드롭 다운 화살표로 어떻게 추가합니까?

그래서 나는 화살표의 크기를 확대하기로 결정했습니다. 화살표 대신 이미지를 추가해야합니다.

이미지를 추가하거나 화살표의 크기를 조정할 수 있습니까?

내 현재 CSS가 아래에 있습니다.

.custom-select:after { 
     content: "â–¼"; 
     content-size:20; 
     position: absolute; 
     top: -83%; 
     right: 6%; 
     bottom: 0; 
     font-size: 60%; 
     line-height:30px; 
     line-width:100px; 
     padding: 0 10px; 
     background:#03498A; 
     color: white; 

     height:40px; 
     pointer-events:none; 

     -webkit-border-radius: 0 6px 6px 0; 
     -moz-border-radius: 0 6px 6px 0; 
     border-radius: 0 6px 6px 0; 
    } 
<label class="custom-select" style="width:40%" onClick="birthday()"> 

    <select name="mydropdown" id="gender" placeholder="Gender"> 

    <option value="">Gender</option> 

<option value="Male">Male</option> 

<option value="Female">Female</option> 
</select> 
</label>

출처

2012-05-18 user1324068

하이보십시오! 가독성을 높이기 위해 코드를 들여 쓰기 적절하게 고려하십시오. 문자 "I"를 대문자로 쓰고 문장 사이에 공백을 추가하는 것도 좋은 생각입니다. –

@code 그레이는 내 질문에 대해 하찮은 질문을하겠습니다. – user1324068

http://stackoverflow.com/questions/5002800/dropdown-menu-image-instead-of-the-default-arrow-image – BvdVen

는이 솔루션을 시도 나를 위해 일한 아주 좋은 보인다. div 내부에 요소를 래핑하고 서식을 적용하는 것이 중요합니다.

또한 화살표 그림의 배경이 투명하거나 배경색이 최소한 드롭 다운과 같아야합니다.

".drop_list select"CSS는 약간 무거워 보일 수 있지만 모든 브라우저/장치에서 잘 보이게하려면 (패딩 및 글꼴 크기 제외) 모두 필요합니다. 데스크톱/태블릿/휴대 전화에서이를 테스트하여 잘 작동합니다. 사이트에 맞게 CSS를 약간 수정해야 할 수도 있습니다.

HTML :

<div class="drop_list"> 
    <select name="mydropdown" id="gender" placeholder="Gender"> 
     <option value="">Gender</option> 
     <option value="Male">Male</option> 
     <option value="Female">Female</option> 
    </select> 
</div>

CSS :

.drop_list { 
    width: 100%; 
    height: 30px; 
    overflow: hidden; 
    background: no-repeat #ffffff; 
    border: 1px solid #000; 
    background-image:url('YOUR_TRANSPARENT_BACKGROUND_ARROW.png'); 
    background-position: top right; 
} 

.drop_list select{ 
    -webkit-appearance:none; 
    border-radius: 0; 
    -webkit-border-radius: 0; 
    background: transparent; 
    padding: 3px; 
    font-size: 1.2em; 
    height: 30px; 
    width: 120%; 
    overflow: hidden; 
}

당신은 이것에 대한 base64로 화살표 이미지를 사용하는 것이 좋습니다, 서버에 하나 개의 작은 요청. 이것에 대한 내를 자유롭게 사용 :

background-image: url(data:image/png;base64,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);

출처

2012-05-18 11:26:32 Vexter

가능하면 CSS를 사용해야하지만 html로 배경 이미지를 사용해야하는 경우

하지만 여전히 원래 답변에서 나머지 CSS를 사용해야합니다. 원래 브라우저에서 생성 한 화살표를 숨기려면 필요합니다. – Vexter

ok vertex – user1324068

감사합니다. div에 적용한 클래스 이름을 수정해야합니다. 또는 클래스 이름을 수정하십시오. 그러면 코드가 작동합니다. – user1749141

사용이 :

<label>Arrow code/image</label>

출처

2012-05-18 11:16:00

이

select.dropdownPager 
{ 
background: url(images/combo.png) no-repeat right; 
width: 60px; 
font-family: Arial; 
font-size: 12px; 
outline: none; 
height: 23px; 
border: none; 
background-color: #fff; 
display: block; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
border-bottom: #ccc 1px solid; 
border-left: #ccc 1px solid; 
border-top: #ccc 1px solid; 
border-right: #ccc 1px solid; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
    }

출처

2012-05-18 11:46:06 mehmood

이것은 나를 위해 작동하지 않았다 .. –

추가 이미지를 드롭 다운 화살표로 어떻게 추가합니까?

답변

관련 문제