Удалить выпадающую стрелку в списке

Привет, я делаю свое меню навигации в качестве выпадающего меню. Это был мой CSSУдалить выпадающую стрелку в списке

#navigation { 
    position: relative; 
    margin-left:0; 
    display: block; 
    width:95%; 
    height:30px; 
    margin-top:10px; 
    margin-bottom:15px; 
    /*background:url(../Shared/arrow.jpg) no-repeat right #ececec;*/ 
    background-color:#ececec; 
    border-radius:3px; 
} 

nav select { 
    display: inline-block; 
    width:90%; 
    margin-left:2%; 
    border:0 !important; 
    position:relative; 
    margin-top:6px; 
    background:url(../Shared/arrow.png) no-repeat right #ececec; 
    -webkit-appearance: none;   
    -moz-appearance: none; 
    /*background: transparent;*/ 
} 

select::-ms-expand { 
    display: none; 
}

Моя проблема заключается в том, что я пытаюсь показать свою собственную кнопку со стрелкой, но она всегда находится под оригинальной кнопки со стрелкой выберите поле. Как я могу изменить этот

enter image description here

при изменении ширины выберите в качестве

width:110%;

тогда выход будет

enter image description here

источник

2013-12-18 neel

Посмотрите на это .. https://coderwall.com/p/w7npmq – zzlalani

Идея состоит в том, чтобы сделать элемент 'select'' width' больше, чем элемент контейнера 'width' –

@ Mr.Alien: Я пробовал это, но проблема в том, что при нажатии на кнопку выбора выпадающее окно очень велико. – neel

Проверьте это: -

http://jsfiddle.net/Bpmhs/

<select id="style1"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

    #style1 { 
     width: 400px; 
     -webkit-appearance: none; 
     -moz-appearance: none; 
     appearance: none; 
     padding: 2px 30px 2px 2px;  
     background: transparent url("http://media.miamiherald.com/static/images/redesign/dropdown-arrow-yellow.gif") no-repeat right center; 
    }

источник

2013-12-18 05:53:54 Anup

еще я получил тот же результат – neel

PLS create скрипка, чтобы прояснить ситуацию. – Anup

Проверьте отредактированный ответ. – Anup

здесь является codpen, что a solution

две ключевые вещи демо вам не хватает в

#navigation{ 
    width: 100%; 
    -webkit-appearance: none; 

}

, а затем контролировать ширину выпадающего в обертке в вашем случае Nav выберите

источник

2013-12-18 06:09:36 brendosthoughts

Я получил тот же ответ .. – neel

@ Parvathiiiii хорошо? ... можем ли мы увидеть, что у вас больше, чем css ie. показать живое демо html и css. поскольку оба ответа выполнены – brendosthoughts

Удалить выпадающую стрелку в списке

ответ

Смежные вопросы