Блог

Главная - Вопросы по программированию - «-webkit-внешний вид: отсутствует;» Эквивалент Firefox?

«-webkit-внешний вид: отсутствует;» Эквивалент Firefox?

#html #css

#HTML #css

Вопрос:

Я хотел бы знать, есть ли что-нибудь эквивалентное: -webkit-appearance: none; для Firefox?

Чего я хочу достичь:

 <select ...>
   <option>...</option>
   <more option>
</select>

Ответ №1:

CSS-свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента с использованием стиля, присущего платформе, на основе темы операционной системы.

Источник:

Mozilla

Комментарии:

1. Большое вам спасибо. Я пытаюсь сделать флажок похожим на кнопку в chrome, работает как шарм, но в firefox 🙁 это не так. form.someform выберите { граница: 1px solid #555; отступ: 0,5 em; размер шрифта: 10px; высота строки: 0,9 em; ширина: 10%; фон: #fff; background: -webkit-gradient (линейный, левый верхний, левый нижний, от (#fff) до (# ccc)); — webkit-внешний вид: отсутствует; -webkit-box-shadow: -1px -1px 1px #fff; -webkit-border-radius: 0,5em; }

Ответ №2:

-moz-appearance:none с <select> по-прежнему отображается стрелка выпадающего списка в Firefox.

Смотрите этот отчет об ошибке для получения дополнительной информации: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Комментарии:

1. Документы MDN developer.mozilla.org/en-US/docs/CSS/-moz-appearance подразумевается, что -moz-appearance: none; это только для XUL. Я, конечно, не могу заставить его работать на веб-сайте.

Ответ №3:

Ответ №4:

Попробуйте это.. Это работает

 select{
    -moz-appearance: none;
    text-overflow: '';
    text-indent: 0.1px;
}

Протестировано на Windows 8, Ubuntu и Mac, последних версиях Firefox.

Живой пример: http://jsfiddle.net/gaurangkathiriya/z3JTh /

Комментарии:

1. отлично сработало! chrome, safari и fox… Все хорошо… Теперь перейдем к INTERNET EXPLORER

Ответ №5:

Если вы хотите, чтобы select выглядел как кнопка в Firefox, используйте:

 select { -moz-appearance: button; }

Как здесь:http://jsfiddle.net/SsTHA /

Комментарии:

1. а затем добавьте фоновое изображение к кнопке, чтобы придать ей стиль.

2. С тех пор они удалили [code] appearance [/ code] из спецификации, поэтому я не сомневаюсь, что Mozilla также удалила [code]-moz-appearance [/ code]. ресурс Mozilla также обновлен, чтобы рекомендовать НИКОГДА не использовать это значение ни на одном веб-сайте.

Ответ №6:

Попробуйте это … для меня это работает в Firefox:

 select {
    padding: 0px 0px 0px 5px;
    border-radius: 0px;
    webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    background: #ffffff url(../images/small-arrow-down.png) 62px 7px no-repeat;
    padding: 1px 20px 1px 3px;
    cursor: pointer;
    border-radius: 2px;

    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Ответ №7:

Вот код для Firefox, Chrome, Safari и Internet Explorer (Internet Explorer 10 и выше).

Просто добавьте маленькое изображение в формате PNG со стрелкой вниз по вашему выбору, и все готово.

Моя стрелка 30×30, но настройте ее в соответствии с вашими спецификациями.

     .yourClass select{
      overflow: none;
      background-color: #ffffff;
      -webkit-appearance: none;
      background-image: url(../images/icons/downArrow.png);
      background-repeat: no-repeat;
      background-position: right;
      cursor: pointer;
    }

    /* Fall back for Internet Explorer 10 and later  */
    .yourClass select::-ms-expand {
        display: none;
    }