-webkit-внешний вид: свойство стиля не принимается браузером Firefox

Я работаю над созданием нового сайта, мне нужно выпадающее меню, чтобы выбрать количество чего-то на моем сайте. но в этом выпадающем меню есть стиль, который я должен сделать. стиль этого выпадающего меню заключается в том, что в раскрывающемся списке отсутствует стрелка - стрелка, которая отображается справа, чтобы щелкнуть по ней и открыть выпадающие элементы.-webkit-внешний вид: свойство стиля не принимается браузером Firefox

Я сделал много поисков, и я нашел это свойство стиля: «- webkit-appearance: none», в классе выпадающего списка я поместил это свойство, и стрелка исчезла с помощью google chrome браузер.

, но проблема заключается в следующем: это свойство не работает в браузере Firefox, стрелка не исчезла.

я дам вам простой вид, чтобы увидеть, как эта стрелка не исчез в браузере Firefox:

Firefox_view здесь вид хром, как выпадающее меню без стрелки: chrome_view

мой вопрос:

есть ли свойство стиля CSS, чтобы сделать выпадающее меню без этой стрелки в браузере «Firefox»?

источник

2013-09-12 khalid jarrah

Ну, нет '-webkit' - это префикс поставщика Webkit (Chrome, Safari); Firefox использует '-moz'. –

Я не знаком с этим свойством, но префикс поставщика FF - это moz, поэтому -moz-внешний вид. Это может сработать. – Sgoldy

см. [Здесь] (https: //developer.mozilla.org/en-US/docs/Web/CSS/-moz-появление) – hexblot

-webkit префиксные свойства соблюдены только для Safari и Chrome, для Firefox вам необходимо использовать префикс -moz. Когда вы используете -webkit, Firefox просто пропустит свойство и движется вперед, таким образом, он портит ваш дизайн select.

Хотя, вы можете достичь выше лил хака, обернуть select тег с помощью div, назначить ширину починки ваших div, и чем использовать greaterwidth для select тега. Теперь используйте background-image для вашего выбора, и использовать overflow: hidden; для обертки

Demo

div { 
    width: 200px; 
    border: 1px solid #f00; 
    overflow: hidden; 
} 

div select { 
    width: 220px; 
    background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png); 
    background-size: 13px 13px; 
    background-repeat: no-repeat; 
    background-position: 180px 5px; 
}

Таким образом, выше даст вам совместимость лучше кросс-браузер, и вы не должны использовать prefixes, а также.

источник

2013-09-12 08:27:20

Вы можете испытать свою удачу с:

-moz-appearance: none

Но это нестандартное свойство ..

Вы можете прочитать больше об этом HERE

источник

2013-09-12 08:28:01 Tomzan

нет такого свойства. проверьте стиль CSS; –

Пожалуйста, проверьте ссылку .. – Tomzan

thanx это здорово –

, например:

appearance: none; 
-webkit-appearance: none; 
-moz-appearance: none;

, но, тем не менее, не покрывать ( Возможно, nt использовать plagin jquery https://select2.github.io/, но я думаю, что это не очень подходит, если вы не будете использовать только один выбор.

источник

2015-05-20 13:51:04

-webkit-внешний вид: свойство стиля не принимается браузером Firefox

ответ

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