How can I change the color of my poll results bar?

Question

I'm making a poll with two results bars. The results bars are both blue, but when I try to change the bar color, it won't change.

I've tried to look at other answers for this on stack overflow, (How can I change the color of a progress bar using javascript?:) but they don't seem to work.

<script>
                   function getVote(int) {
                   var xmlhttp=new XMLHttpRequest();
                   xmlhttp.onreadystatechange=function() {
                       if (this.readyState==4 && this.status==200) {
                       document.getElementById("poll").innerHTML=this.responseText;
                       }
                   }
                   xmlhttp.open("GET","poll/study_vote.php?vote="+int,true);
                   xmlhttp.send();
                   }
               </script>

               <div id="poll">
                       <h2>When studying, do you often find yourself procrastinating?</h2>
                       <form>
                       Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br>
                       No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
                       </form>
               </div>

</script>

PHP:

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0) {
 $yes = $yes + 1;
}
if ($vote == 1) {
 $no = $no + 1;
}

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);

$yesProgress = 100*round($yes/($no+$yes),2);
$noProgress = 100*round($no/($no+$yes),2);

?>

<h2>Result:</h2>
<table>
   <tr>
       <td>Yes:</td>

       <td>
       <progress id="file1" max="100" value="<?= $yesProgress ?>">
           <?= $yesProgress ?>
       </progress>
       <?= $yesProgress ?>%
       </td>
   </tr>
    <tr>
       <td>No:</td>
       <td>
       <progress id="file2" max="100" value="<?= $noProgress ?>">
           <?= $noProgress ?>
       </progress>
       <?= $noProgress ?>%
       </td>
   </tr>
</table>

The CSS code below to try an change the bar color's from blue to pink did not work. The green and grey bar is the bar I tried to change to pink. The result is shown below:

CSS:

#poll {
   text-align: center;
   background-color: #FFDFB2;
   border-radius: 2vw;
   padding: 10px 50px;
   display: inline-block;
}

progress#file[value]::-webkit-progress-bar {
   background-color: purple;
   border-radius: 2px;
}

When do you want the color to change exactly or is it that you want one to be blue and the other to be a different color? — dale landry, Jun 09 '20 at 03:25
May find this article helpful: https://css-tricks.com/html5-progress-element/ — dale landry, Jun 09 '20 at 03:33
@dalelandry I want both of them to be another color (e.g. pink) — mononoke_395, Jun 09 '20 at 05:09
@RenevanderLende Yes, that's right. I changed the element ID names to be #file1 and #file2. The CSS for the bar color change is on my post - but it hasn't worked properly - do you possibly know why? — mononoke_395, Jun 09 '20 at 05:28

score 1 · Accepted Answer · answered Jun 09 '20 at 05:51

The actual progress bar is implemented by the browser (similar to how buttons are, if you've had CSS issues with those before), and is a bit more difficult to directly modify with CSS than just targeting the progress element. You'll have to use vendor-specific pseudo-elements, for example in Chrome:

#file1::-webkit-progress-value {
    background: pink;
}

I believe in Firefox the required CSS is:

#file1::-moz-progress-bar {
    background-color: pink;
}

You can find more information about other CSS properties you can apply (and their vendor-specific pseudo-elements) on the MDN documentation, particularly in the "See Also" section near the bottom.

Thanks so much! This really helped a lot – mononoke_395 Jun 09 '20 at 06:05 — mononoke_395, Jun 09 '20 at 06:05

How can I change the color of my poll results bar?

1 Answers1