كود css كود pseudo كود تلوين السكرول والسلكت ::selection و ::-webkit-scrollbar
كود 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.
