CSS до и после псевдоэлемента в диапазоне ввода

Я хочу сделать ползунок с динамически отображаемыми границами.

Я нашел код в Интернете, который я адаптировал для своего случая. В этом коде используются только html и css, и он хорошо отображается в Chrome, но не в Firefox (у меня только IE9, в котором нет ползунка):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>

        input {
            position: relative;
        }
        input::after {
            position: absolute;
            top: 1em;
            right: 0em;
            content: attr(max);
        }
        input::before {
            position: absolute;
            top: 1em;
            content: attr(min);
        }
    </style>
</head>
<body>
    <input type="range" id="test" min="1" max="5">
</body>
</html>

Я знаю, что это не похоже на спецификацию w3c (ответ SO).

Но возможно ли сделать это правильно для любых браузеров?


html css pseudo-element
person Pilou    schedule 15.05.2014    source источник
comment
Я в замешательстве. Вы имеете в виду, что источник, из которого вы получили этот код, говорит, что он хорошо работает в Chrome, а не в Firefox? Поскольку вы сказали, что у вас есть только IE9 и вы не можете протестировать его где-либо еще.   -  person BoltClock    schedule 15.05.2014
comment
Нет, я адаптировал код, он работает на моем компьютере в Chrome, но не в Firefox. Но единственный IE, который у меня есть, это 9, поэтому я не могу протестировать IE10/11.   -  person Pilou    schedule 15.05.2014
comment
Ой. Так ты сам не ответил на свой вопрос? Поскольку это не определено ни в одном стандарте, что, в свою очередь, приводит к непоследовательной поддержке браузеров, нет правильного способа сделать это.   -  person BoltClock    schedule 15.05.2014
comment
@Pierre-LouisLaffont использует стек браузера   -  person Mr. Alien    schedule 15.05.2014
comment
Я искал обходной путь для этой проблемы с другим тегом или чем-то еще.   -  person Pilou    schedule 15.05.2014

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете использовать span, чтобы обернуть это пользовательскими атрибутами с префиксом data-, которые действительны с HTML5.

HTML

<span data-range-min="1" data-range-max="5">
   <input type="range" id="test" min="1" max="5" />
</span>

CSS

span {
    position: relative;
}
span:after {
    position: absolute;
    top: 1em;
    right: 0em;
    content: attr(data-range-max);
}
span:before {
    position: absolute;
    top: 1em;
    content: attr(data-range-min);
}

Демо

Демонстрация 2 (немного причудливая версия)< /эм>

Протестировано на Firefox и Chrome, и оно работает отлично, теперь, очевидно, вам нужно стилизовать их, объявив какое-то собственное семейство шрифтов и цвет, чтобы сделать их немного причудливыми в соответствии с вашими требованиями.

person Mr. Alien    schedule 15.05.2014
comment
Отлично работает как в Chrome, так и в IE10+. - person Abhitalks; 15.05.2014
comment
Я думал о добавлении диапазона, чтобы разместить :after и :before, но я блокировал способ динамического получения границ. Ваше решение в порядке, но вам нужно продублировать границы в html. - person Pilou; 15.05.2014
comment
@Pierre-LouisLaffont Пьер-ЛуиЛаффонт, я не понял граничной части, можешь ли ты объяснить это хорошо? - person Mr. Alien; 15.05.2014
comment
Часть, которую я назвал границами, была минимальным и максимальным значениями (извините за мой английский, если это не то слово). Они должны быть продублированы как новые атрибуты диапазона с вашим решением. - person Pilou; 15.05.2014
comment
@Pierre-LouisLaffont, не могли бы вы проверить второе демо, пожалуйста? - person Mr. Alien; 15.05.2014
comment
Обе версии меня устраивают, я могу поработать над стилем, чтобы он соответствовал остальной части моей страницы. ;) - person Pilou; 15.05.2014