チェックボックスのスタイリングは、私は次のようにチェックボックスのスタイルをしたいのSafariのモバイル

Question

では動作しません：

これは私のCSSです：これは、デスクトップ上に完璧示し

.checkboxcontact input[type="checkbox"] { 
    -webkit-appearance: none; 
    background-color: white; 
    border: 1px solid #d44803; 
    padding: 9px; 
    border-radius: 3px; 
    display: inline-block; 
    position: relative; 
    float:left; 
} 

.checkboxcontact input[type="checkbox"]:checked { 
    background-color: #d44803; 
    border: 1px solid white; 
    color: #fff; 
} 

.checkboxcontact input[type="checkbox"]:checked:after { 
    content: '\2714'; 
    font-size: 14px; 
    position: absolute; 
    top: 0; 
    left: 3px; 
    color: #fff; 
    font-family: "FontAwesome"; 
} 

携帯電話でのChrome

しかし、問題は、iPhone上のSafariです。

私はこれをどのように修正することができます：それはこのように表示さ？フォールバックなどありますか？

Answer 1

それは、上記の示唆された通り、疑似要素が入力でうまく機能しない、しかし、ラベルの内側にあるチェックボックスをラップする良いでしょう - それはW3Cです有効なので、ラベルとしてforタグを使用する必要はなく、入力チェックボックスにidを使用することもできません。

ここでHTMLれる：

<label class="custom-checkbox"> 
    <input type="checkbox" value="checkbox1"> 
    <span>Checkbox</span> 
</label> 

コードが十分に汎用性がありますので、あなただけのチェックボックスが必要な場合は、ラベルなしで、あなただけの空のスパンを残す - 代わりに、または - あなたががタグを維持する必要があります独自のカスタムクラスを作成して、ラベル自体に擬似要素を適用することができます。ここで

がCSSです：

.custom-checkbox { 
    position: relative; 
    display: block; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    line-height: 20px; 
} 

.custom-checkbox span { 
    display: block; 
    margin-left: 20px; 
    padding-left: 7px; 
    line-height: 20px; 
    text-align: left; 
} 

.custom-checkbox span::before { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    left: 0; 
    background: #fdfdfd; 
    border: 1px solid #e4e5e7; 
    @include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1)); 
} 

.custom-checkbox span::after { 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    left: 0; 
    font-size: 18px; 
    color: #0087b7; 
    line-height: 20px; 
    text-align: center; 
} 

.custom-checkbox input[type="checkbox"] { 
    opacity: 0; 
    z-index: -1; 
    position: absolute; 
} 

.custom-checkbox input[type="checkbox"]:checked + span::after { 
    font-family: "FontAwesome"; 
    content: "\f00c"; 
    background:#d44803; 
    color:#fff; 
} 

そしてここでは、作業フィドルです： https://jsfiddle.net/ee1uhb3g/

確認済みはすべてのブラウザでテスト - FF、クローム、サファリ、IEなど

Answer 2

同じ問題も私は一度も直面しました。私はあなたのデザインごとにチェック&の画像を使用することをお勧めします。ユーザーがチェックすると、イメージsrcはチェックされたイメージに変わります。あなたはそのためにjavascript関数を使うことができます。同じサイズの画像を使用するようにしてください。そのユーザーは、それらが2つの異なる画像であると感じることはできません。参考までに、私が使った画像を添付しています。ここで

Check image

Uncheck image

私のコードです。私があなたのために見つけた場所。それを見てください。私のスタイルシートの画像を&のものを私のjavascriptでレンダリングしています。ユーザーがチェック画像をクリックすると、 'selected'クラスが削除されます。したがって、チェックされていない画像はユーザーに表示されます。

function ClearSelection() { 
 
    $(".filterlist ul li").each(function() { 
 
     $(this).removeClass("selected"); 
 
    }); 
 
}

.filterlist ul li 
 
{ 
 
\t padding:5px; 
 
\t border-bottom:1px solid gray; 
 
\t cursor:pointer; \t 
 
\t background-image: url("../images/untick.png"); 
 
\t background-repeat:no-repeat; 
 
\t background-position: 10 8; 
 
} 
 
.filterlist ul li.selected{background-image: url("../images/tick.png");}

Answer 3

擬似要素:after又は:before入力型素子と正常に動作していません。だから後者のような擬似要素を追加するのは間違いです。だから、チェックボックスの横にラベルを追加し、そのスタイルを追加する。

.checkboxcontact label { 
 
    display: inline-block; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    padding-left: 5px; 
 
} 
 
.checkboxcontact input[type="checkbox"] { 
 
    opacity: 0; 
 
} 
 
.checkboxcontact label::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 17px; 
 
    height: 17px; 
 
    left: 0; 
 
    margin-left: -20px; 
 
    border: 1px solid #d44803; 
 
    border-radius: 3px; 
 
    background-color: #fff;  
 
} 
 

 
.checkboxcontact input[type="checkbox"]:checked + label::before, 
 
.checkboxcontact input[type="checkbox"]:focus + label::before { 
 
    background-color: #d44803; 
 
    border: 1px solid white; 
 
} 
 

 
.checkboxcontact input[type="checkbox"]:checked + label::after { 
 
    content: '\f00c'; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: -17px; 
 
    color: #fff; 
 
    font-family: "FontAwesome"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="checkboxcontact"> 
 
    <input type="checkbox" id="check1"/> 
 
    <label for="check1"> 
 
     Check me out 
 
    </label> 
 
</div>