2013-07-23 22 views
9

używam następujący kod, aby dostosować mój wybierz rozwijaną strzałkę:Dostosowane wybierz strzałkę menu nie klikalny

HTML:

<span class="selectWrapper"> 
    <select id="rowselect" class="pageinfoselect input-mini"> 
     <option>...</option> 
    </select> 
</span> 

CSS:

span.selectWrapper { 
    position: relative; 
    display: inline-block; 
      width:65px; 
} 

span.selectWrapper select { 
    display: inline-block; 
    padding: 4px 3px 3px 5px; 
    margin: 0; 
    font: inherit; 
    outline:none; /* remove focus ring from Webkit */ 
    line-height: 1.2; 
    background: #f5f5f5; 
    height:30px; 
    color:#666666; 
    border:1px solid #dddddd; 
} 




/* Select arrow styling */ 
span.selectWrapper:after { 
    content: url("../images/arrow_down.png"); 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    line-height: 30px; 
    padding: 0 7px; 
    background: #f5f5f5; 
    color: white; 
    border:1px solid #dddddd; 
    border-left:0px; 
} 

ten działa dobrze i zastępuje domyślną strzałkę rozwijaną, ale problemem jest to, że nie można kliknąć obrazu strzałki. Jeśli kliknę na polu wyboru otwiera ale chcę go otworzyć po kliknięciu strzałki obrazu, jak również

Odpowiedz

26

Dodaj następującą regułę

pointer-events:none; 

EDIT:

Należy zauważyć, mimo że IE jeszcze nie obsługuje tej właściwości (chociaż zgodnie z caniuse - będzie obsługiwany w IE11)

ALE, Jeśli nadal chcesz skorzystać z tej metody, możesz użyć Modernizera lub warunkowych komentarzy (dla IE < 10) i this css hack (dla IE10) , aby przywrócić IE do standardu wbudowanego w strzałkę.

/*target Internet Explorer 9 and Internet Explorer 10:*/ 
@media screen and (min-width:0\0) { 
    span.selectWrapper:after 
    { 
     display:none; 
    } 
} 

Istnieje jednak obejście (a także inne rozwiązanie) za to, co wspominam w my answer here - który zawiera również this FIDDLE

+0

Gdzie należy dodać to? –

+2

do span.selectWrapper: po klasy – Danield

+0

Pracował świetnie, dzięki! –

Powiązane problemy