>  기사  >  웹 프론트엔드  >  html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명

html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명

寻∝梦
寻∝梦원래의
2018-09-04 10:39:3816399검색

이 글에서는 html5의 새로운 진행률 표시줄 태그의 스타일 분석을 소개하고, html5 진행률 태그를 통해 진행률 표시줄의 색상을 변경하는 방법을 설명합니다. 다음으로 이 글을 살펴보겠습니다

우선 html5 진행 태그 소개에 대해 알아봅시다:

진행률은 진행률 표시줄을 정의하는 HTML5의 새로운 요소로, 파일 업로드 진행률, 파일 다운로드 진행률을 표시하는 데 사용할 수 있으며 로딩 상태로도 사용할 수 있습니다. 로딩 바.

팁: 작업 진행 상황을 표시하려면 javaScript와 함께 태그를 사용하세요.

참고: 태그는 측정항목(예: 디스크 공간 사용량 또는 쿼리 결과)을 나타내는 데 적합하지 않습니다. 무게와 단위를 나타내려면 대신 태그를 사용하세요.

html5 진행률 진행률 표시줄 구문:

<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

html5 진행률 태그의 예를 준비해 보겠습니다. # 🎜 🎜#

<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
progress{
        width: 168px;
    height: 5px;
}
progress::-webkit-progress-bar
{
       background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
     background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>

설명, Chrome 브라우저 진행 상황은 다음 구조로 렌더링됩니다

progress

:-webkit-progress-bar 모든 진행# 🎜🎜## 🎜🎜#:-webkit-progress-value 진행 완료

이 두 의사 요소로 스타일을 지정하세요.

하지만 IE10과 같은 다른 브라우저에서는 다릅니다. 이 두 의사 요소는 색상 스타일을 직접 사용하여 완료된 진행의 색상을 수정할 수 있으며 전체 진행은 다음과 같습니다. background# 🎜🎜#

FireFox에서 진행률 표시줄은 완료된 진행률을 나타내고 배경은 전체 진행률을 나타냅니다. 그러나 Opera에서는 이 스타일이 브라우저 기본 스타일일 수만 있습니다.

따라서 호환성 작성 방법은 다음과 같이 생각해볼 수 있습니다.

progress
{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景,只不过被下面的::progress-bar覆盖了*/      
}
progress::-webkit-progress-bar
{
   background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
     background:orange;
}

위는 진행중인 컬러 CSS 스타일에 대한 코드입니다. bar 표시 효과는 다음과 같습니다. :

좋아, 위는 HTML5에서 새로운 진행 태그를 사용하고 색상을 변경하는 방법에 대한 기사입니다. .궁금하신 점은 아래로 문의주세요.

html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명【에디터 추천】

html5 헤더태그는 어떻게 사용하나요? html5 헤더 태그의 역할 소개

html에서 include 태그란 무엇인가요? html include는 구성 분석을 구현합니다

위 내용은 html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.