Обработчик диапазона ввода не отображается в Chrome - PullRequest
Новая
       15

Обработчик диапазона ввода не отображается в Chrome

1 голос
/ 16 мая 2011

Я работаю над инструментом для предварительного просмотра шрифтов на сайте.Для этого инструмента я хочу использовать <input type="range" />, чтобы изменить размер шрифта в текстовой области.Так как мне не нравится рендеринг ползунка и обработчика по умолчанию в WebKit, я настроил их с помощью CSS.Хотя в Safari страница отображается нормально, Chrome не отображает дескриптор слайдера (хотя слайдеры на других сайтах отображаются нормально).Что мне нужно изменить, чтобы заставить его работать и в Chrome?

HTML 

<input type="range" min="6" max="70" value="22" id="font-1-size" />

CSS 

.tester-option.font-size input
{
    -webkit-appearance: none !important;
    background: #cecece;
    height: 1px;
    width: 425px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    margin-top: 10px;
    cursor: pointer;
}

.tester-option.font-size input::-webkit-slider-thumb
{
    -webkit-appearance: none !important;
    background: #666;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Вы можете найти живой пример здесь: http://fishnation.de/development/26plus/#test-fontотображать различия safari и chrome

PS Мне известно, что существует пользовательский интерфейс jQuery, но я хочу заменить как можно меньше элементов.

1 Ответ

2 голосов
/ 16 мая 2011

Попробуйте изменить свой селектор.Я использовал #font-1-size::-webkit-slider-thumb.Это работало нормально в Chrome.

...