1

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
has a column for Demo of various CSS appearance keywords. All of the Demos are being displayed as normal text to me.

CSS appearance list

The list in the link is longer. All the "Lorem" are being shown as normal text in 4 browsers: Firefox 82 & Chrome 86 (both in Linux Mint 19.2 Cinnamon and Android 10).

My own try in my Linux Mint browsers is showing "Lorem" as normal text instead of button:

.appearanceButton {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<span class="appearanceButton">Lorem</span>

Why aren't the appearance button properties working? How to make them work?

gom
  • 796
  • 2
  • 9
  • 23

1 Answers1

0

You're setting an inavlid appearance that's why. You need to set a proper value like one of the ones here

Spans aren't buttons.

.button {
  background-color: orange;
  border: none;
  border-radius: 5px;
  display: inline-block;
  font-size: 16px;
  padding: 20px;
}
<button class="button">Lorem</button>
learningtoanimate
  • 949
  • 6
  • 22
  • But value "button" is valid. – gom Nov 17 '20 at 05:27
  • But a span is not a button. – learningtoanimate Nov 17 '20 at 05:34
  • 1
    I think purpose of `appearance: button` is to make normal text appear as button. The Demo column in the link you've provided is showing "Lorem" displayed as normal text for all the values. Then what demo is the website trying to give? – gom Nov 17 '20 at 05:41
  • The demo is of different appearances. If you want to display something as a button it needs to be within a ` – learningtoanimate Nov 17 '20 at 05:44
  • In my actual code i was trying to make my anchor tags appear as buttons. Guess i'll now use different approach. I think the "appearance" property used to work in older browsers: https://stackoverflow.com/a/35657675/1444680 – gom Nov 17 '20 at 06:04
  • 1
    Ah yeah, you'll have to change this because support was dropped. – learningtoanimate Nov 17 '20 at 06:21