0

I have this css:

a#exampleId {
    -webkit-appearance: button;
   /* -moz-appearance: button;*/
appearance: button;
}

And this HTML:

<html itemscope="" itemtype="http://schema.org/WebPage" lang="en" wtx-context="7AFAB2C8-5844-4EA0-8DF4-32D617786BAD">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="example.css">
</head>

<body>
    <form>
        <p>TEXT <a id="exampleId" href="google.com">click this </a></p>
        <button> A </button>
    </form>
<body>
</html>

And in chrome I see the browser override the -webkit-appearance: button; property:

enter image description here

Why do chrome override -webkit-appearance property and how to prevent it?

HowToTellAChild
  • 623
  • 1
  • 9
  • 21

1 Answers1

1

Property names with a vendor prefix are experimental features not generally intended for production use.

When they stop being experimental, the prefix is removed and a non-prefixed version supersedes it.

-webkit-appearance is being overridden by appearance two lines later.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • That is the thing. I followed this artice: https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link And the accepted answer recommend this css solution. – HowToTellAChild Sep 25 '20 at 09:46