css - progress element transparent background -


i have <progress> bar , want color track linear-gradient. effect want achieve though having portions of transparent, styled way

progress[value]::-webkit-progress-bar {  background-image: linear-gradient( right, red 33%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 66%, yellow 66%, yellow 100%);  } 

this renders grey bar in 33% 66% portion, instead of plain transparent. i've tried using value transparent not seem work. still solid default color.

here fiddle: http://jsfiddle.net/0jayslzu/

is possible apply transparency track of progress element?

short answer background-image: should background:

long answer have

progress[value]::-webkit-progress-bar {  background-image: linear-gradient( right, red 33%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 66%, yellow 66%, yellow 100%);  } 

it should

progress[value]::-webkit-progress-bar {  background: linear-gradient( right, red 33%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 66%, yellow 66%, yellow 100%);  } 

Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -