blob: df2f8d36255267901dcbb1b8a25338fec750ed66 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
---
title: チェックボックスのレ点が表示されない
slug: Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html
tags:
- Compatibility
- Invisible element
---
<h2 id="概要">概要</h2>
<p> チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9985/0303.jpg" style="width: 520px; height: 250px; margin-right: 50px; margin-left: 50px;"></p>
<h2 id="要因">要因</h2>
<p> 要因の代表例として以下があります。</p>
<ol>
<li>
<p><strong>ベンダープレフィックス</strong><br>
チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。<br>
または、Firefox用に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。</p>
<pre><code><font size="3"> 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), <strong>linear-gradient(top, #00397b 0%, #01afeb 100%)</strong>;
} </font></code></pre>
<p> </p>
</li>
</ol>
<h2 id="解決策">解決策</h2>
<p> 要因の解決策の代表例として以下があります。</p>
<ol>
<li>
<p><strong>ベンダープレフィックス</strong><br>
-webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するために<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を使用します。<br>
その場合、第一引数には例のように「to top」を指定することで正しく表示されます。</p>
<pre><code><font size="3"> 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), <strong>linear-gradient(to top, #00397b 0%, #01afeb 100%)</strong>;
} </font></code></pre>
</li>
</ol>
<h2 id="メリット">メリット</h2>
<p> ・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>
|
