Я хочу настроить внешний вид типа ввода диапазона в HTML5, чтобы он выглядел как индикатор выполнения. Я попытался применить некоторые общие атрибуты CSS с помощью класса CSS, но кажется, что они не работают.
Кто-нибудь может подсказать мне, как его настроить ??
РЕДАКТИРОВАТЬ : в настоящее время все основные браузеры поддерживают оба
Следовательно вы должны использовать один из этих двух, как объяснено в других ответах , и этот ответ больше не должен быть принятым.
довольно новый, и вы уже пытаетесь настроить его с помощью CSS. :)
Я бы не стал пробовать это по двум причинам:
там могут быть огромные проблемы совместимости сейчас и в следующие несколько (или много) лет .
Подумайте, что в настоящее время элемент управления формы, такой как
(доступный с момента запуска Интернета), все еще проблематичен для настройки с помощью CSS в кросс-браузере. Например, если вы установите заполнение
для полей выбора, многие браузеры (IE7, OPERA9, CHROME5, SAFARI4) будут полностью игнорировать заполнение.
Работает только IE8 и на FF 3.6. (все тесты проводились с HTML5 DOCTYPE в стандартном режиме).
Чтобы отобразить индикатор выполнения в HTML5, вы должны следовать совету marcgg в его ответе. Так как ни один браузер в настоящее время не обрабатывает его, вы можете использовать простой div с ap внутри следующим образом: Затем просто обновите К вашему сведению: если вы хотите сделать это на простом JS, вот код: Если вы используете HTML 5, почему бы не использовать тег
был создан, чтобы отображать слайдер НЕ индикатор выполнения , пытаясь обмануть его с помощью CSS, чтобы преобразовать слайдер в индикатор выполнения звучит странно. Это похоже на попытку использовать CSS для преобразования
в таблицу, но почему бы вам просто не использовать
для визуализации таблиц ?!
<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
<p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;"> </p>
</div>
style.width
внутреннего элемента P
в процентах, например: width: 75%
document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';
progress
?<progress value="1534602" max="4603807">33%</progress>
Похожие вопросы: