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

Question

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

0

Привет, я использую меню навигации в качестве выпадающего меню. Это был мой 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;
}

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

при изменении ширины

  width:110%;

то вывод будет

neel 18 дек. 2013, в 07:19

Источник

0

взгляните на это .. coderwall.com/p/w7npmq
zzlalani 18 дек. 2013, в 05:43
0

Идея состоит в том, чтобы сделать width элемента select больше width элемента контейнера
Mr. Alien 18 дек. 2013, в 05:45
0

@Mr.Alien:Mr.Alien: я пробовал это, но проблема в том, что при нажатии на кнопку выбора, выпадающее окно очень большое
neel 18 дек. 2013, в 05:49
0

@Mr.Alien:Mr.Alien: я отредактировал свой вопрос
neel 18 дек. 2013, в 05:53

Показать ещё 2 комментария

Теги:

jquery

html

css

2 ответа

Ещё вопросы

Идея состоит в том, чтобы сделать width элемента select больше width элемента контейнера
@Mr.Alien:Mr.Alien: я пробовал это, но проблема в том, что при нажатии на кнопку выбора, выпадающее окно очень большое
@Mr.Alien:Mr.Alien: я отредактировал свой вопрос

brendosthoughts · Answer 1 · 2013-12-18T03-42-00.000Z

вот копья, которая демонстрирует решение

две основные вещи, которые вам не хватает, - это

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

}

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

@Parvathiiiii хорошо? ... Можем ли мы увидеть, что у вас есть больше, чем CSS, т.е. показать демо-версию HTML и CSS. как оба ответа сделали

Anup · Answer 2 · 2013-12-18T03-07-00.000Z

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

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;
  }

Пожалуйста, создайте скрипку, чтобы уточнить вещи.
проверьте отредактированный ответ.