Свойство CSS "внешний вид" / "-moz-внешний вид" / "-webkit-внешний вид" не работает

#css

Вопрос:

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
содержит столбец для демонстрации различных ключевых слов внешнего вида CSS. Все демонстрации отображаются для меня как обычный текст.

Список в ссылке длиннее. Все «Знания» отображаются как обычный текст в 4 браузерах: Firefox 82 и Chrome 86 (как в Linux Mint 19.2 Cinnamon, так и в Android 10).

Моя собственная попытка в моих браузерах Linux Mint показывает «Lorem» как обычный текст вместо кнопки:

 .appearanceButton {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

 <span class="appearanceButton">Lorem</span>

Почему не работают свойства кнопки внешнего вида? Как заставить их работать?

Ответ №1:

Вот почему вы устанавливаете внешний вид inavlid. Вам нужно установить правильное значение, подобное одному из приведенных здесь

Промежутки не являются кнопками.

 .button {
  background-color: orange;
  border: none;
  border-radius: 5px;
  display: inline-block;
  font-size: 16px;
  padding: 20px;
}

 <button class="button">Lorem</button>

1. Но значение «кнопка» допустимо.

2. Но диапазон — это не кнопка.

3. Я думаю, что цель appearance: button состоит в том, чтобы обычный текст отображался как кнопка. В демонстрационном столбце в предоставленной вами ссылке отображается «Lorem», отображаемый как обычный текст для всех значений. Тогда какую демонстрацию пытается предоставить веб-сайт?

4. Демонстрация имеет другой внешний вид. Если вы хотите отобразить что-то в виде кнопки, оно должно быть внутри <button> тега. Если у вас был пользовательский стиль, вы можете сделать то же самое с любым элементом. Почему вы используете a <span> для чего-то, что является кнопкой?

5. Ах да, вам придется изменить это, потому что поддержка была прекращена.