كود css كود pseudo كود تلوين السكرول والسلكت ::selection و ::-webkit-scrollbar

[Rise Company]

كود css كود pseudo كود تلوين السكرول والسلكت ::selection و ::-webkit-scrollbar
Applying CSS styles from Site Settings for Scrollbar Not Working
Styling ::-webkit-scrollbar-track not working




/* rise-pseudo */


::selection {
background: #FF5700;
color: #fff;
}
/*width*/
body::-webkit-scrollbar {
width:6px;
}


/*track*/
body::-webkit-scrollbar-track {
background:rgb(0 0 0);
}


/*thumb*/
body::-webkit-scrollbar-thumb {
background:#ff5700;
border-color: #ff5700;
border-style:solid;
border-radius:10px;
}



الكود فى الاعلى يتحكم فى select و scrollbar باللون المناسب لك
مما يعطى branding جيد

CSS Scrollbar Selectors


You can use the following pseudo-elements to customize various parts
of the scrollbar for WebKit browsers:



::-webkit-scrollbar — the entire scrollbar.
::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
::-webkit-scrollbar:horizontal{} — the horizontal scrollbar.
::-webkit-scrollbar-thumb — the draggable scrolling handle.
::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
::-webkit-scrollbar:vertical{} — the vertical scrollbar.
::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.


المرجع:
https://discourse.webflow.com/t/applying-css-styles-from-site-settings-for-scrollbar-not-working/200717
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
https://stackoverflow.com/questions/44212713/styling-webkit-scrollbar-track-not-working