Checkbox phong cách không hoạt động trên điện thoại di động Safari

Question

Tôi muốn phong cách các hộp kiểm bên như sau:

Đây là tôi 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"; 
} 

Điều này cho thấy hoàn hảo trên máy tính để bàn và Chrome trên điện thoại di động.

Nhưng vấn đề là với Safari trên iPhone. Nó hiển thị như sau:

Làm cách nào để khắc phục sự cố này? Có một dự phòng hay gì đó?

Answer 1

Vì nó đã được đề xuất ở trên, yếu tố giả không làm việc tốt với các đầu vào, tuy nhiên, nó sẽ là một ý tưởng tốt để quấn vào hộp kiểm bên nhãn - đó là w3c hợp lệ, để nó hoạt động như dự định và bạn không phải sử dụng thẻ for cho nhãn, cũng như không sử dụng id cho hộp kiểm nhập.

Dưới đây là HTML:

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

Mã này là đủ linh hoạt, vì vậy nếu bạn chỉ cần vào hộp kiểm, không có nhãn, bạn chỉ cần để lại một khoảng trống - bạn phải giữ thẻ mặc dù - hoặc cách khác bạn có thể tạo lớp tùy chỉnh của riêng mình để áp dụng các phần tử giả trên chính nhãn đó.

Đây là 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; 
} 

Và đây là một fiddle làm việc: https://jsfiddle.net/ee1uhb3g/

đã xác minh được thử nghiệm trên tất cả các trình duyệt - FF, Chrome, Safari, IE, vv

Answer 2

Cùng một vấn đề tôi cũng phải đối mặt một lần. Tôi sẽ đề nghị bạn sử dụng hình ảnh kiểm tra & bỏ chọn theo thiết kế của bạn. Khi người dùng đã chọn, hình ảnh src sẽ thay đổi thành hình ảnh đã chọn. Bạn có thể sử dụng hàm javascript cho điều đó. Đảm bảo bạn sử dụng cùng một kích thước hình ảnh. Vì vậy, người dùng không thể cảm thấy đó là 2 hình ảnh khác nhau. Để bạn tham khảo, tôi sẽ đính kèm những hình ảnh mà tôi đã sử dụng.

Check image

Uncheck image

Đây là mã của tôi. Một số nơi tôi đã tìm thấy cho bạn. nhìn qua nó. đã cho những hình ảnh đó trong bảng định kiểu của tôi & hiển thị những hình ảnh đó trong javascript của tôi. Khi người dùng nhấp vào hình ảnh đã chọn, lớp 'đã chọn' tôi đang xóa. Vì vậy, hình ảnh bỏ chọn đó sẽ được hiển thị cho người dùng.

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

Pseudo yếu tố :after hoặc :before không hoạt động đúng với loại yếu tố đầu vào. Vì vậy, thêm một phần tử giả như sau cho họ là không chính xác. Vì vậy, thêm nhãn bên cạnh hộp kiểm và thêm kiểu cho điều đó.

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