Стили jQuery , Изменение системных параметров

[cupoma58]

Привет.
jQuery предлагает типовой слайдер/прогресс-бар, состоящий из следующих
компонентов:

1. ui-slider (z-index:0) - контейнер прогресс-бара
2. ui-slider-range (z-index:1) - итог прогресса
3. ui-slider-handle (z-index:2) - ползунок

.progres {                      /* ui-slider/прогрeс-бар */
    -webkit-appearance: none;   /*добавлено, коррекция*/
    position: absolute;
    text-align: left;
    bottom: 35px;
    height: 2px;
    width: 96%;
    border: 1px solid #ff0000;  /*добавлено, коррекция*/
    margin: 0 0 0 2%;  
    background: transparent;
    cursor: pointer;
}
 
.progres:hover + .tool-tip {
    display: block;
}
 
.progres .ui-slider-range {     /* цвет уровня */
    z-index: 1;
    position: absolute;
    background: #ccc;
}
 
.progres .ui-slider-handle {     /* ползунок */
    z-index: 2;
    position: absolute;
    width: 10px;  
    height: 10px;
    border-radius: 100%;
    background: #ccc;  
    margin: 1px 0 0 -2px;
    outline: none;
    border: none;
}

С коррекцией 2-го и 3-го компонентов - проблем нет.
1-й компонент, браузер (Chrome), видит в обрамлении (~1px) border, белого
цвета. В стилях библиотеки (jquery-ui-1.13.2.css) - это оформление не
оговаривается. Попытка отключить мнение браузера (-webkit-appearance: none;)
и задать собственный цвет border - оказалась неудачной. Точнее - новый цвет
border проявляется но, только при перезагрузке страницы, мельком.
Что, я, упускаю?

Сообщение отредактировано: cupoma58 - 17.12.24, 13:13

[cupoma58]

Вопрос решён.