CSS3 - How to "restore" ::-webkit-scrollbar property to the default scroll bar

Question

Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using @media css for achived this but, I don't know how to restore the defaults values.

@media screen and (min-width: 768px) and (max-width: 1024px) {  }    /*Scroll bar nav*/ ::-webkit-scrollbar {     width: 12px; }  /* Track */ ::-webkit-scrollbar-track {     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);      -webkit-border-radius: 10px;     border-radius: 10px;     background:#FFF;     }  /* Handle */ ::-webkit-scrollbar-thumb {     -webkit-border-radius: 10px;     border-radius: 10px;     background: rgba(204,204,204,0.8);      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  } ::-webkit-scrollbar-thumb:window-inactive {     background: rgba(204,204,204,0.4);  } 

Answer 1

I just realized you can set all the properties in auto; and will do the trick. This is a self answer but I guess someday someone can have the same question.

/*Scroll bar nav*/ ::-webkit-scrollbar {     width: auto; }  /* Track */ ::-webkit-scrollbar-track {     -webkit-box-shadow: auto;      -webkit-border-radius: auto;     border-radius: auto;     background:auto;     }  /* Handle */ ::-webkit-scrollbar-thumb {     -webkit-border-radius:auto;     border-radius:auto;     background:auto;      -webkit-box-shadow:auto;  } ::-webkit-scrollbar-thumb:window-inactive {     background: auto;  } 

I don't know if exist another method.

-- UPDATE -- Look like you can also use the initial and unset value //reverting all the values

::-webkit-scrollbar {     all:unset; } 

or apply to an specific one {width : unset} || {width : initial}

NOTE: Using unset will not work on IE11

Answer 2

Use the initial value or unset value for the properties you want to revert (depending on how exactly you want to revert them).

Both these values can be applied to all CSS properties.

example

::-webkit-scrollbar {     width: initial; } 

or

::-webkit-scrollbar {     width: unset; } 

---

If you want to revert all properties of a rule then you should use the all keyword

example

::-webkit-scrollbar-thumb {     all:unset; } 

---

Notice: No IE support for any of these as of yet.
Varying levels of support for each browser (see the linked docs for details)