CODEWITHSUNDEEP
htmlcss
Guerric P
Guerric P

Reputation: 31815

How do I use the user agent default stylesheet on another element?

Every user agent has its own default stylesheet. For example here is the default button element style for the current Edge Chromium:

button {
    appearance: auto;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    border-radius: 2px;
}

I'd like to make an anchor element look like a button. I could copy the CSS above in a a selector but that would make the anchor look like an Edge Chromium button on every browser.

How do I copy the current browser's default appearance of an element, and apply it to another?

Upvotes: 1

Views: 255

Answers (1)

Vinícius A. L. Souza
Vinícius A. L. Souza

Reputation: 495

I would retrieve the style information of the specific element that you want to copy, and apply that style to the desired element using javascript.

You can retrieve the css information using the getComputedStyle method.

const btn = document.getElementById('buttonID');
 
const styles = window.getComputedStyle(btn);

You can read more on this page

Upvotes: 1

Related Questions