MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

チェックボックスのレ点が表示されない

概要

 チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。

要因

 要因の代表例として以下があります。

  1. ベンダープレフィックス
    チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。
    または、Firefox用にlinear-gradient()関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。

      input[type="checkbox"]:checked {
    	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%); 
    	background-image: url(../contents/bg_08.png), linear-gradient(top, #00397b 0%, #01afeb 100%);
      }				

     

解決策

 要因の解決策の代表例として以下があります。

  1. ベンダープレフィックス
    -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するためにlinear-gradient()関数を使用します。
    その場合、第一引数には例のように「to top」を指定することで正しく表示されます。

      input[type="checkbox"]:checked  {
    	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
    	background-image: url(../contents/bg_08.png), linear-gradient(to top, #00397b 0%, #01afeb 100%);
      }				

メリット

 ・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。

戻る

ドキュメントのタグと貢献者

 このページの貢献者: wtrfp
 最終更新者: wtrfp,