我正在用兩個結果欄進行民意調查。結果欄都是藍色的，但是當我嘗試更改欄顏色時，它不會改變。我試圖在堆棧溢出時查看其他答案，（如何使用 javascript 更改進度條的顏色？ :) 但它們似乎不起作用。<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>下面嘗試將條形顏色從藍色更改為粉紅色的 CSS 代碼不起作用。綠色和灰色條是我嘗試更改為粉紅色的條。結果如下圖：.
1 回答
森欄
TA貢獻1810條經驗 獲得超5個贊
實際的進度條是由瀏覽器實現的（類似于按鈕的方式，如果你以前遇到過 CSS 問題的話），用 CSS 直接修改比僅僅針對元素更難一些progress。您必須使用特定于供應商的偽元素，例如在 Chrome 中：
#file1::-webkit-progress-value?{?
???background:?pink;
}我相信 Firefox 所需的 CSS 是：
#file1::-moz-progress-bar?{
????background-color:?pink;
}您可以應用的其他 CSS 屬性（及其特定于供應商的偽元素）的更多信息，尤其是在靠近底部的“另請參閱”部分。
- 1 回答
- 0 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消