web-dev-qa-db-fra.com

Le style des cases à cocher ne fonctionne pas sur Safari mobile

Je veux styliser les cases à cocher comme suit:

 enter image description here

C'est monCSS:

.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";
}

Cela montre parfait sur le bureau et Chrome sur les téléphones mobiles. 

 enter image description here

Mais le problème est avec Safari sur iPhone. Cela se voit comme ça:

 enter image description here

Comment puis-je réparer cela? Y a-t-il un repli ou quelque chose?

htmlcsscss3checkboxsafari
6
nielsv

Comme il a été suggéré ci-dessus, les pseudo-éléments ne fonctionnent pas bien avec les entrées. Toutefois, il serait judicieux d’emballer la case à cocher inside l’étiquette - c’est valide w3c, pour que cela fonctionne comme prévu et vous n'avez pas besoin d'utiliser la balise for pour l'étiquette, ni d'utiliser id pour la case à cocher d'entrée.

Voici le HTML:

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

Le code est suffisamment polyvalent. Si vous n'avez besoin que de la case à cocher, sans étiquette, vous laissez simplement la plage vide - vous devez conserver la balise - ou vous pouvez également créer votre propre classe personnalisée pour appliquer les pseudo-éléments sur l'étiquette. lui-même.

Voici le 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;
}

Et voici un violon qui fonctionne: https://jsfiddle.net/ee1uhb3g/

Vérifié testé sur tous les navigateurs - FF, Chrome, Safari, IE, etc.

2
scooterlord

Le pseudo-élément :after ou :before ne fonctionne pas correctement avec un élément de type entrée. Donc, ajouter un pseudo-élément comme après n'est pas correct. Donc, ajoutez une étiquette à côté de la case à cocher et ajoutez un style pour cela.

.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>

2
Manish Patel

Même problème que j'ai aussi affronté une fois. Je vous suggère d'utiliser des images de cocher et décocher selon votre conception. Lorsque l'utilisateur est coché, image src devrait changer en image cochée. Vous pouvez utiliser la fonction javascript pour cela. Assurez-vous que vous utilisez les deux mêmes tailles d'images. Donc, cet utilisateur ne peut pas sentir qu'il s'agit de 2 images différentes. Pour votre référence, je joins ces images que j'ai utilisées. 

Vérifier l'image

Décochez l'image

Voici mon code. Certains où j'ai trouvé pour vous. regarde par-dessus. ont donné ces images dans ma feuille de style et rendues celles de mon javascript. Lorsque l'utilisateur clique sur l'image cochée, la classe 'sélectionnée' est supprimée. Donc, cette image décochée sera montrée à l'utilisateur.

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

1
Kashyap Kaki