CSS를 사용하여 선택 상자에서 텍스트를 자르는 방법

Question

나는 2 일 동안 언젠가는이 문제를 풀기 위해 노력했지만 지금은 성공하지 못했습니다.

CSS를 사용하는 중간의 선택 상자에서 텍스트를 잘라내거나 숨길 필요가 있습니다. 나머지 필드 (오른쪽)는 공백/흰색으로 남겨 두어야하며 배경 이미지는 마지막으로 오른쪽에 있어야합니다. 문제는 내가 시도한 솔루션은 선택 상자의 너비를 변경해야하며,이 경우 현재 너비에 배경 화살표를 유지하기 위해 너비를 변경하지 않아야합니다. 이런 식으로 뭔가 :

어쩌면 누군가가 (자바 스크립트가 가능한 옵션이 아닙니다) 밝은 생각을 할 것이다 :

여기에 HTML :

<div class="dropdown"> 
    <select> 
     <option value="">Some Text</option> 
     <option value="">Some More Text2</option> 
     <option value="">Some More More More Longer Text</option> 
    </select>         
</div> 

그리고 여기에 CSS :

.dropdown{ 
    width:150px; 
    border: 1px solid #cfcfcf; 
    height: auto; 
    border-radius: 5px; 
    padding:3px 4px 4px; 
    position: relative; 
    z-index: 0; 
    overflow:hidden; 
    } 

.dropdown select{ 
    border: none; 
    background-color: transparent; 
    outline: none; 
    padding: 1px 0 0 5px; 
    width:165%; 
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; 
background-position: 55%; 
    } 

JSFiddle 여기 : http://jsfiddle.net/pazzesco/r6c9zcpc/7/

Answer 1

이 CSS3의 비트와 함께 실현시키기는 당신의 최선의 방법이 될 것입니다 현재와 ​​미래를 위해.

http://jsfiddle.net/plastclens/16Ljd8s8/2/

/* this places an arbitrary element inside the dropdown but before it's children elements */ 
/* We use it to cover half the select box as well as display the custom arrow */ 
.dropdown:before { 
    height:29px; 
    width:75px; 
    display:block; 
    content:''; 
    position:absolute; 
    top:0; 
    right:3px; 
    background: url(http://i57.tinypic.com/nnmgpy_th.png) #fff no-repeat right; 
    pointer-events:none; 
} 

중요하지만 간과 부분은 pointer-events:none; 라인 :

여기에 여전히 화살표있어 사용하여, 다른 기술을 보여주는 바이올린입니다. 이 "오버레이"에 대한 클릭이 선택 영역으로 이동합니다.

여기에없는 이미지 접근 방식에 대한 또 다른 괜찮은 자원은 다음과 같습니다 http://cssdeck.com/labs/styling-select-box-with-css3 당신은 그것을 조금 조정해야 할 수도 있지만이 점을

Answer 2

스타일 드롭 다운은 때로는 까다 롭습니다. 당신은 중지 요소의 텍스트를 강제로 선택에 약간의 오른쪽 패딩을 추가 할 수 있습니다 "내부"당신의 배경 :

.dropdown select{ 
    border: none; 
    background-color: transparent; 
    outline: none; 
    padding: 1px 0 0 5px; 
    width:165%; 
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; 
    background-position: 55%; 
    padding-right: 80%; 
} 

JSFiddle