Câu trả lời:
Nếu điều gì đó xảy ra trong bất kỳ trình duyệt nào, tôi sẽ rất ngạc nhiên. Đây là một trong những phần tử biểu mẫu nổi bật mà các trình duyệt có xu hướng không cho phép bạn tạo kiểu nhiều như vậy và mọi người thường cố gắng thay thế bằng javascript để họ có thể tạo kiểu / mã thứ gì đó trông và hoạt động giống như một hộp kiểm.
Tôi đề nghị sử dụng "đường viền" thay vì "đường viền". Ví dụ: outline: 1px solid #1e5180.
!importantvào css của mình khi sử dụng dàn ý. Tôi đã thử nghiệm điều này trong Firefox 12.0 và không có! Quan trọng là đường viền sẽ biến mất miễn là tôi nhấp vào hộp kiểm.
Bạn nên sử dụng
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;Sau đó, bạn loại bỏ hình ảnh / kiểu hộp kiểm mặc định và có thể tạo kiểu cho nó. Dù sao thì một đường viền vẫn sẽ ở đó trong Firefox
Bạn có thể sử dụng bóng hộp để giả mạo đường viền:
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);Đây là giải pháp trình duyệt chéo CSS (không có hình ảnh) thuần túy dựa trên Hộp kiểm tùy chỉnh và Nút radio của Martin với CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-đã xem lại /
Đây là jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
Tôi đã thử nghiệm điều này trên các trình duyệt sau:
label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
display: inline-block;
vertical-align: middle;
}
label *,
label *
{
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"]
{
opacity: 0;
position: absolute;
}
input[type="radio"] + span,
input[type="checkbox"] + span
{
font: normal 11px/14px Arial, Sans-serif;
color: #333;
}
label:hover span::before,
label:hover span::before
{
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}
label:hover span,
label:hover span
{
color: #000;
}
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
content: "";
width: 12px;
height: 12px;
margin: 0 4px 0 0;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
color: #666;
}
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
cursor: default;
-moz-opacity: .4;
-webkit-opacity: .4;
opacity: .4;
}
input[type="checkbox"] + span::before
{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
input[type="radio"]:checked + span::before
{
content: "\2022";
font-size: 30px;
margin-top: -1px;
}
input[type="checkbox"]:checked + span::before
{
content: "\2714";
font-size: 12px;
}
input[class="blue"] + span::before
{
border: solid 1px blue;
background: #B2DBFF;
background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
background: -o-radial-gradient(#B2DBFF, #dfdfdf);
background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
color: darkblue;
}
input[class="red"] + span::before
{
border: solid 1px red;
background: #FF9593;
background: -moz-radial-gradient(#FF9593, #dfdfdf);
background: -webkit-radial-gradient(#FF9593, #dfdfdf);
background: -ms-radial-gradient(#FF9593, #dfdfdf);
background: -o-radial-gradient(#FF9593, #dfdfdf);
background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
color: darkred;
} <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>Tôi biết là đã lỗi thời .. Nhưng một giải pháp nhỏ sẽ là đặt hộp kiểm của bạn bên trong thẻ nhãn, sau đó tạo kiểu cho nhãn bằng đường viền:
<label class='hasborder'><input type='checkbox' /></label>sau đó tạo kiểu cho nhãn:
.hasborder { border:1px solid #F00; }label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }và sau đó label > input[type=checkbox] { position: absolute; left: -999px; }Điều này sẽ cho phép bạn tùy chỉnh kiểu hộp kiểm của riêng mình và hộp kiểm ban đầu sẽ vẫn được chọn / bỏ chọn nhưng người dùng sẽ không nhìn thấy nó. Họ sẽ chỉ thấy hộp kiểm tùy chỉnh của bạn.
:hovervà :checkedđể tạo kiểu cho các trạng thái khác của hộp kiểm tùy chỉnh của bạn.
Đây là phiên bản của tôi sử dụng FontAwesome cho mã đánh dấu hộp kiểm, tôi nghĩ rằng FontAwesome được hầu hết mọi người sử dụng nên thật an toàn nếu bạn cũng có nó. Không được thử nghiệm trong IE / Edge và tôi không nghĩ rằng có ai quan tâm.
input[type=checkbox] {
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
}
input[type=checkbox]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: #fef2e0;
display: block;
width: 15px;
height: 15px;
border: 1px solid black;
margin-right: 7px;
}
input[type=checkbox]:checked:before {
color: black !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<input type="checkbox">Đối với Firefox , Chrome và Safari , không có gì xảy ra.
Đối với IE , đường viền được áp dụng bên ngoài hộp kiểm (không phải là một phần của hộp kiểm) và hiệu ứng tô bóng "lạ mắt" trong hộp kiểm đã biến mất (được hiển thị dưới dạng hộp kiểm cũ).
Đối với Opera , kiểu đường viền thực sự đang áp dụng đường viền trên phần tử hộp kiểm.
Opera cũng xử lý các kiểu khác trên hộp kiểm tốt hơn so với các trình duyệt khác: màu được áp dụng làm màu của dấu đánh dấu, màu nền được áp dụng làm màu nền bên trong hộp kiểm (IE áp dụng nền như thể hộp kiểm nằm bên trong hộp <div>có nền)) .
Giải pháp đơn giản nhất là bọc hộp kiểm bên trong <div>giống như những người khác đã đề xuất.
Nếu bạn muốn kiểm soát hoàn toàn sự xuất hiện, bạn sẽ phải sử dụng phương pháp tiếp cận hình ảnh / javascript nâng cao, cũng được những người khác chấp nhận.
Hộp kiểm tạo kiểu (và nhiều yếu tố đầu vào khác cho trường cũ đó) không thực sự khả thi với css thuần túy nếu bạn muốn thay đổi đáng kể giao diện trực quan.
Đặt cược tốt nhất của bạn là triển khai một cái gì đó như jqTransform thực sự thay thế bạn đầu vào bằng hình ảnh và áp dụng hành vi javascript cho nó để bắt chước hộp kiểm (hoặc phần tử khác cho vấn đề đó)
Không, bạn vẫn không thể tạo kiểu cho chính hộp kiểm, nhưng tôi (cuối cùng) đã tìm ra cách tạo kiểu ảo ảnh trong khi vẫn giữ chức năng nhấp vào hộp kiểm. Nó có nghĩa là bạn có thể chuyển đổi nó ngay cả khi con trỏ không nằm yên hoàn hảo mà không gặp rủi ro khi chọn văn bản hoặc kích hoạt kéo và thả!
Ví dụ đang sử dụng một "nút" span cũng như một số văn bản trong nhãn, nhưng nó cung cấp cho bạn ý tưởng về cách bạn có thể ẩn hộp kiểm và vẽ bất cứ thứ gì đằng sau nó.
Giải pháp này có lẽ cũng phù hợp với các nút radio.
Phần sau hoạt động trên IE9, FF30.0 và Chrome 40.0.2214.91 và chỉ là một ví dụ cơ bản. Bạn vẫn có thể sử dụng nó kết hợp với ảnh nền và các yếu tố giả.
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}
<label>
<input type="checkbox" />
<span> </span>Label text
</label>Đây là một cách đơn giản (để sử dụng trước hoặc sau các phần tử / lớp giả):
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* Above three lines allow the checkbox:after position at checkbox's position */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after overlap the checkbox */
/* Anything you want */
}<!DOCTYPE html>
<html>
<head>
<style>
.abc123
{
-webkit-appearance:none;
width: 14px;
height: 14px;
display: inline-block;
background: #FFFFFF;
border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
content: "";
display: inline-block;
position: relative;
top: -3px;
left: 4px;
width: 3px;
height: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
}
input[type=checkbox]:checked {
background: #327DFF;
outline: none;
border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
outline: none;
}
input:hover {
border: 1px solid rgba(50,125,255,1);
}
</style>
</head>
<body>
<input class="abc123" type="checkbox"></input>
</body>
</html>đặt nó trong một div và thêm đường viền vào div