scrollbar-face-color в CSS


Содержание

FPublisher

Web-технологии: База знаний

Разукрашиваем scrollbar средствами CSS

В некоторых случаях можно пожертвовать привычным видом элементов управления и немного оживить интерфейс своими собственными стилями. Сегодня мы поговорим о полосах прокрутки (scrollbar), а точнее о том, как изменить их вид с помощью CSS.

CSS свойства scrollbar

С самого начала хочу отметить, что описываемые ниже CSS свойства являются расширением спецификации CSS2, введенным компаний Microsoft, реализованным начиная с IE 5.5

Полоса прокрутки состоит из фона, ползунока и концевых кнопок со стрелками.

Кнопки могут быть как активными так и нет. Если скроллбар неактивен, то ползунок отсутсвует.

Самый простой способ изменить полосу прокрутки это задать свойство scrollbar-base-color. Это свойство задает основной цвет полосы прокрутки. Если не определены другие свойства полосы прокрутки, то бегунок и кнопки прокрутки будут отображаться определенным вами цветом с применением трехмерных эффектов. Фон полосы прокрутки будет отображаться тоже этим цветом, но только осветленным.

Например, scrollbar-base-color:lime приведет к результат представленому на рисунке ниже.

Конечно можно делать более тонкие настройки полосы прокрутки при помощи других CSS свойств.

scrollbar-3dlight-color — задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок. scrollbar-arrow-color — задает цвет стрелок на кнопках полосы прокрутки. scrollbar-darkshadow-color — задает цвет «тени», отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией). scrollbar-face-color — задает основной цвет бегунка и кнопок прокрутки полосы прокрутки. scrollbar-highlight-color — задает цвет «освещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней). scrollbar-shadow-color — задает цвет «неосвещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом «тени», задаваемым атрибутом scroll-darkshadow-color. scrollbar-track-color — задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.

Как говорилось выше, концевые кнопки могут быть либо активными, либо не активными. Различие между активными и не активными кнопками заключается только в цветах, используемых при отображении кнопок. На активной кнопке стрелка изображается при помощи цветов scrollbar-arrow-color (рисунок выше). На неактивной кнопке стрелка отображается при помощи цветов scrollbar-shadow-color и scrollbar-highlight-color. Остальные элементы активной и неактивной кнопки полностью совпадают.

Отдельно о фоне

Фон полосы прокрутки задается посредством свойства scrollbar-track-color (смотри рисунок выше). Если это свойство не задано, то фон формируется из двух цветов (scrollbar-highlight-color и scrollbar-face-color), расположенных в шахматном порядке (смотри рисунок ниже).

Почему раньше работало, а сейчас нет!

В то время как появился IE5.5 цвет скроллинга окна браузера задавали применяя свойства к элементу BODY. Однако, с выходом IE6 эти стили не всегда работают. Почему?

Илон Маск рекомендует:  Моделирование при сжатии текстовых данных алфавиты

Это поведение связано с директивой DOCTYPE и её влиянием на боксовую модель браузера. В общем, если браузер находится в режиме совместимости (Quirks mode), то все OK, но если браузер следует стандартам (Standards mode), то стили для скроллбаров, применяемые к BODY не работают. Не вдаваясь в подробности скажу, что это легко исправить, применяя стили также и к элементу HTML (смотрите пример ниже) .

Примеры

Пара слов о других браузерах

Кроме Internet Explorer 5.5+ измененять полосы прокрутки с помощью CSS могут Opera 7.23+ и Konqueror 3.1+. Однако в Opera до версии 7.5 для этого необходимо изменить настройки браузера (Style options). Кроме того, Опера позволяет изменять скроллинг только, если она находится в режиме совместимости (Quirks mode).

Полоса прокрутки.

Коротенькая и совсем несложная глава про цвет полосы прокрутки.

Для того чтобы изменить дизайн полосы прокрутки, раскрасить её на свой лад, необходимо воспользоваться свойствами из семейства scrollbar , присвоив их нужному элементу.

В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки

, и т.д.. в том числе и сама страница — тег .

В таблице ниже перечислены все свойства CSS из семейства scrollbar , а также показан результат применения этих свойств.

Свойство полосы прокрутки: Внешний вид:
scrollbar-3dlight-color: #ff0000; — Цвет верхней и левой тени ползунка и кнопок.
scrollbar-arrow-color: #ff0000; — Цвет стрелок на кнопках полосы прокрутки.
scrollbar-base-color: #ff0000; — Базовый цвет полосы прокрутки.
scrollbar-darkshadow-color: #ff0000; — Цвет нижней и правой тени.(dark shadow — темная тень)
scrollbar-face-color: #ff0000; — Цвет лицевой части полосы прокрутки.
scrollbar-highlight-color: #ff0000; — Цвет подсветки полосы прокрутки.
scrollbar-shadow-color: #ff0000; — Цвет тени полосы прокрутки (shadow-тень).
scrollbar-track-color: #ff0000; — Цвет дорожки для полосы прокрутки.

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

  • #ff0000 — Шестнадцатеричное значение цвета RGB.
  • red — Именное значение цвета.
  • RGB(255, 0, 0) — Значение цвета RGB.
  • inherit — применяется значение родительского элемента.(по умолчанию)

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : -ms-scrollbar-face-color

Материал из WebWikiABCD

Содержание

Атрибут -ms-scrollbar-face-color | Свойство scrollbarFaceColor

Задает цвет ползунка и кнопок со стрелками в полосе прокрутки.

Синтаксис

HTML
Скрипты [ vColor = ] object.style.scrollbarFaceColor

Используемые значения

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). У свойства нет значения по умолчанию. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Полоса прокрутки — это прямоугольный элемент с ползунком и кнопками со стрелками, с помощью которых можно изменять позицию контента страницы на экране по горизонтали или вертикали. Кнопки, находящиеся на каждом из концов полосы прокрутки, — прямоугольные, с навигационными стрелками, показывающими направление прокрутки. Нажимая на них, пользователь по чуть-чуть пролистывает контент по горизонтали или вертикали.

Свойство scrollbarFaceColor применяется к элементам, для которых показывается полоса прокрутки. В Каскадных таблицах стилей (CSS) возможность скроллинга для всех объектов задается через свойство overflow.

Примеры

В примере свойство scrollbarFaceColor применяется к элементу textArea.

Стандарты

Это свойство является расширением от Microsoft для CSS

Как задать расположение и цвет скроллбара?

29.10.2015, 12:26

Цвет скроллбара в iframe
Здрасвствуйте,не подскажите как можно в iframe поменять цвет скроллбара?

Задать стили (цвет текста) списку. Как задать цвет текста
Помогите задать стили(цвет текста) списку. Как задать цвет текста ?

Как задать цвет фона?
Всем добрый вечер. Столкнулся с такой проблемой. Не получается задать задний фон. Для этого блока.

Как элементу задать и цвет и градиент одновременно?
Типа такого, чтобы градиент был над цветомbackground: red, linear-gradient(to top, black, white);

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : -ms-scrollbar-face-color

смотрим также

Материал из Справочник Web-языков

Содержание

Атрибут -ms-scrollbar-face-color | Свойство scrollbarFaceColor

Задает цвет ползунка и кнопок со стрелками в полосе прокрутки.

Синтаксис

HTML
Скрипты [ vColor = ] object.style.scrollbarFaceColor

Используемые значения

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). У свойства нет значения по умолчанию. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Полоса прокрутки — это прямоугольный элемент с ползунком и кнопками со стрелками, с помощью которых можно изменять позицию контента страницы на экране по горизонтали или вертикали. Кнопки, находящиеся на каждом из концов полосы прокрутки, — прямоугольные, с навигационными стрелками, показывающими направление прокрутки. Нажимая на них, пользователь по чуть-чуть пролистывает контент по горизонтали или вертикали.

Свойство scrollbarFaceColor применяется к элементам, для которых показывается полоса прокрутки. В Каскадных таблицах стилей (CSS) возможность скроллинга для всех объектов задается через свойство overflow.

Примеры

В примере свойство scrollbarFaceColor применяется к элементу textArea.

Стандарты

Это свойство является расширением от Microsoft для CSS

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53407abb9e278e35 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Scrollbar-face-color в CSS

Как можно убрать скролбар?
Прописал в css такую штуку:
BODY <
background-color: 677780;
scrollbar-face-color: 677780;
scrollbar-track-color: 677780;
scrollbar-arrow-color: 677780;
scrollbar-highlight-color: 677780;
scrollbar-shadow-color: 677780;
scrollbar-darkshadow-color: 677780;
scrollbar-base-color: 677780;
>
но всё равно хотелось бы что-нибудь попроще.
Если есть что-то типа или < scrollbar-visibility: hidden;>, то чирканите кто-нить как точно выглядят эти параметры…
Также интересует можно ли задать ширину скролбара в пикселах?
Пробовал — не катит.

На http://spravkaweb.ru/css.php я уже был, решения не нашёл.

Меню пользователя MYSTERION
Посмотреть профиль
Найти ещё сообщения от MYSTERION

Это не делается средствами css.
У окна браузера (в DOM-модели ) есть метод open; синтаксис его такой —
open(«URL»,»имя»,»параметры»)
где URL — адрес страницы окна, имя — имя окна, а в параметрах задаётся внешний вид окна. И среди этих параметров есть scrollbars.
Если делаешь pop-up — можешь не напрягаться, т.к. по умолчанию параметр scrollbars=no, т.е. полос прокрутки в открываемом методом open окне нет. Если же нужно, чтобы они были — задаёшь scrollbars=yes.
для иллюстрации сказанного — попробуй выполнить скрипт

14.12.2005, 01:18 [включить плавающее окно] #2
Меню пользователя Гхост-цзы
Посмотреть профиль
Найти ещё сообщения от Гхост-цзы

Гхост-цзы Спасибо конечно, но мне нужно главную страницу (index.) сделать без скролбара, хотя открытие страницы с заданым размером меня тоже интересовало, т.ч. благодарю.

Раз уж не делается, то будем довольствоваться таким способом, единственное что мне теперь нужно так это сместить немного таблицу выравненную по центру вправо (на половину ширины скролбара) чтоб визуально она чётко по центру была. В общем чтоб смещалась относительно центра, а не относительно верхнего левого угла. Подскажите как это сделать?

Как изменить цвет полосы прокрутки с помощью css

Мой jsfiddle здесь
Я пытаюсь изменить цвет полосы прокрутки, но здесь он не работает.

Вы можете использовать следующие атрибуты для webkit, которые попадают в тень DOM:

Здесь работает скрипка с красной полосой прокрутки на основе кода этой страницы, объясняющего проблемы.

Используя это и ваше решение, вы можете обрабатывать все браузеры, кроме Firefox, которые в этот момент, я думаю, все еще нуждаются в решении javascript.

Ваш css будет работать только в браузере IE. И css, предлагаемый hayk.mart, будет работать в браузерах webkit. И используя различные хаки CSS, вы не можете стирать полосы прокрутки браузеров с одинаковым результатом.

Итак, лучше использовать плагин jQuery/Javascript, чтобы получить решение с перекрестным браузером с тем же результатом.

Решение:

Используя jScrollPane плагин jQuery, вы можете достичь кросс-браузерного решения

Каскадные таблицы стилей CSS советы & приёмы

Смотрите также указатель всех приёмов работы.

Бесцветные полосы прокрутки

Некоторые браузеры (IE, Konqueror) поддерживают нестандартные свойства ‘scrollbar-shadow-color’, ‘scrollbar-track-color’ и другие. Эти свойства нелегальны: они не определены ни в одной из спецификаций CSS и не содержат отметки, указывающей на то, что это собственная разработка (такая отметка ставится путем добавления приставки «-vendor-«). Но, к счастью, вы можете легко отключить их.

Чтобы быть уверенными, что ваш браузер сохранит нормальные цвета полосы прокрутки, вам нужно использовать пользовательскую таблицу стилей и объявление ‘!important’. Пользовательскую таблицу стилей обычно можно выбрать в меню настройки/параметров браузера. В IE вы найдете соответствующую настройку во вкладке «Доступность» («Accessibility»), а в Konqueror — во вкладке «Стили» («Stylesheets»).

  1. Если у вас еще нет пользовательской таблицы стилей, создайте новый CSS-файл. Вы можете сохранить его где угодно.
  2. Добавьте следующие строки в файл таблицы стилей:
  3. Укажите путь к этому файлу в соответствующем диалоговом окне вашего браузера.

Это должно сработать. Вам необходимо перезапустить браузер для того, чтобы увидеть эффект. Чтобы убедиться, что сработало, можете посмотреть небольшой тест, который я сделал.

Created 12 Oct 2001;
Last updated Вт 05 ноя 2020 19:12:56

Scrollbar-face-color в CSS

CSS Codes and Examples

www.tagindex.net

scrollbar-***-color: ***;

The scrollbar-***-color property changes the color of the scrollbars.
( *** = base , face , track , arrow , highlight , shadow , 3dlight , and darkshadow )

Applying this property to the BODY (or HTML) element applies the specified style to an entire page.

When you specify only the base color

body <
scrollbar-base-color : #ff0000 ;
>

When you specify the detailed color

body <
scrollbar-face-color : #ff8c00 ;
scrollbar-track-color : #fff8dc ;
scrollbar-arrow-color : #ffffff ;
scrollbar-highlight-color : #fff8dc ;
scrollbar-shadow-color : #d2691e ;
scrollbar-3dlight-color : #ffebcd ;
scrollbar-darkshadow-color : #8b0000 ;
>

14.12.2005, 11:57 [включить плавающее окно] #3
Property Value Explanation
scrollbar-base-color color code or name (1) the base color
scrollbar-face-color color code or name (2) the face color
scrollbar-track-color color code or name (3) the track color
scrollbar-arrow-color color code or name (4) the arrow color
scrollbar-highlight-color color code or name (5) the highlight color
scrollbar-shadow-color color code or name (6) the shadow color
scrollbar-3dlight-color color code or name (7) the 3D light color
scrollbar-darkshadow-color color code or name (8) the dark shadow color

The element to which the style should be applied

Standards mode : Apply these styles to the HTML element.
Quirks mode : Apply these styles to the BODY element.

Илон Маск рекомендует:  Переменные в Less
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL