Bagaimana cara mengubah gaya batas kotak centang di CSS?

122

Bagaimana cara mengubah gaya batas kotak centang (masukan)? Saya sudah memakainya border:1px solid #1e5180, tetapi di FireFox 3.5, tidak ada yang terjadi!

html  css 
— Ricky
sumber

Jawaban:

63

Jika sesuatu terjadi di browser apa pun, saya akan terkejut. Ini adalah salah satu elemen formulir luar biasa yang cenderung tidak diizinkan oleh browser untuk Anda menata gaya, dan yang biasanya orang coba ganti dengan javascript sehingga mereka dapat memberi gaya / kode sesuatu agar terlihat dan berfungsi seperti kotak centang.

— Sofia
sumber
4
Opera menangani gaya dengan sangat baik di kotak centang. IE memiliki beberapa gaya yang membungkus kotak centang (bukan pada kotak centang itu sendiri).
— kagum
4
Mereka sebenarnya jelek saat ini: D
— Gergely Fehérvári
1
masih jelek di 2020
— Paul
210

Saya sarankan menggunakan "garis besar" daripada "batas". Sebagai contoh: outline: 1px solid #1e5180.

— Greg
sumber
3
Garis besar adalah alternatif yang bagus.
— Nippysaurus
4
outline sangat bagus, dan berfungsi untuk semua kotak masukan dan pilih, membuatnya berguna untuk kelas ".error".
— SztupY
2
Anda mungkin perlu menambahkan !importantcss Anda saat menggunakan outline. Saya menguji ini di Firefox 12.0 dan tanpa! Yang penting garis besarnya akan hilang selama saya mengklik kotak centang.
— Weezle
3
Ini adalah alternatif yang bagus, tetapi masalah garis besarnya adalah bahwa di IE7 itu tidak berfungsi !!
— Yises
13
@Yises Anda harus khawatir tentang IE7? Astaga, maafkan aku.
— theblang
71

Kamu harus menggunakan

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Kemudian Anda menyingkirkan gambar / gaya kotak centang default dan dapat menatanya. Pokoknya perbatasan akan tetap ada di Firefox

— Valerij
sumber
2
Opera memungkinkan Anda memberi gaya kotak centang tanpa peretasan tambahan - Saya akan meninggalkan gaya -o-penampilan. -moz-appearance dan -webkit-appearance sangat bagus.
— Neall
7
Ups - berbicara terlalu cepat: "-webkit-appearance: none;" tampaknya menonaktifkan perilaku kotak centang.
— Neall
6
bagi saya (chrome 5) tidak, Anda perlu memberi gaya: check state extra
— Valerij
1
penampilan tidak pernah menjadi bagian dari standar CSS. Jangan gunakan itu.
— Evgeny
wow ini luar biasa saya akan menyingkirkan plugin. saya bisa melakukan apa saja => | masukan [type = kotak centang] | masukan [type = checkbox]: hover | input [type = checkbox]: dicentang | masukan [type = checkbox]: dicentang: setelah ...
— h0mayun
21

Anda dapat menggunakan bayangan kotak untuk memalsukan batas:

-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);
— Dennis Heiden
sumber
@retrovertigo versi yang mana?
— Dennis Heiden
Versi 12.0.2 (14606.3.4) / terbaru di macOS 10.14
— retrovertigo
@ Retrovertigo Saya telah menguji solusi saya dan Anda benar. Jawaban saya tidak berfungsi untuk Safari tanpa modifikasi lebih lanjut (seperti -webkit-appearance: none;). 3 tahun kemudian, saya akan menggunakan solusi yang diberikan oleh pendingfox atau Adan. Tetapi saya akan mencoba memperpanjang jawaban saya dalam beberapa minggu. Terima kasih atas tanggapan Anda.
— Dennis Heiden
11

Berikut ini adalah solusi lintas-browser CSS (tanpa gambar) murni berdasarkan Kotak Centang Kustom dan Tombol Radio Martin dengan CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -dengan-css3-revisited /

Ini adalah jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

Saya telah menguji ini di browser berikut:

  • FireFox (41.0.2) (42)
  • Google Chrome (46.0.2490.80 m)
  • Opera (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [Versi Pembaruan: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari Mobile iPhone iOS9 (601.1.46)

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>
Luaskan cuplikan

— Adan Rehtla
sumber
10

Saya sudah ketinggalan zaman, saya tahu .. Tapi sedikit solusi adalah dengan meletakkan kotak centang Anda di dalam tag label, lalu memberi gaya label dengan tepi:

<label class='hasborder'><input type='checkbox' /></label>

lalu beri gaya label:

.hasborder { border:1px solid #F00; }
— Hussam
sumber
1
Ingat juga, elemen label akan mencentang kotak centang setiap kali diklik, meskipun kotak centang tidak dapat dilihat di dalamnya. Jadi pada label Anda dapat melakukan sesuatu seperti label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }dan kemudian label > input[type=checkbox] { position: absolute; left: -999px; }Ini akan membiarkan Anda menyesuaikan gaya kotak centang Anda sendiri dan kotak centang asli akan tetap dicentang / tidak dicentang tetapi pengguna tidak akan melihatnya. Mereka hanya akan melihat kotak centang kustom Anda.
— Gavin
1
Lupa menambahkan, maka Anda dapat menggunakan pemilih seperti :hoverdan :checkeduntuk memberi gaya status lain dari kotak centang kustom Anda.
— Gavin
10

Ini versi saya yang menggunakan FontAwesome untuk checkbox ticker, saya rasa FontAwesome digunakan oleh hampir semua orang jadi aman untuk berasumsi bahwa Anda juga memilikinya. Tidak diuji di IE / Edge dan saya rasa tidak ada yang peduli.

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">
Luaskan cuplikan

— pendingfox
sumber
9

Untuk Firefox , Chrome dan Safari , tidak ada yang terjadi.

Untuk IE , batas diterapkan di luar kotak centang (bukan sebagai bagian dari kotak centang), dan efek bayangan "mewah" di kotak centang hilang (ditampilkan sebagai kotak centang model lama).

Untuk Opera gaya perbatasan sebenarnya menerapkan batas pada elemen kotak centang.
Opera juga menangani gaya lain pada kotak centang lebih baik daripada peramban lain: warna diterapkan sebagai warna centang, warna latar diterapkan sebagai warna latar belakang di dalam kotak centang (IE menerapkan latar belakang seolah-olah kotak centang berada di dalam<div> dengan latar belakang)) .

Kesimpulan

Solusi termudah adalah dengan membungkus kotak centang di dalam <div>seperti yang disarankan orang lain.
Jika Anda ingin mengontrol tampilan sepenuhnya, Anda harus menggunakan pendekatan gambar / javascript lanjutan, yang juga dimaksudkan oleh orang lain.

— perasaan kagum
sumber
2
1 untuk penelitian, tetapi membungkusnya di dalam div bukanlah solusi. Tidak membiarkan Anda gaya kotak centang, itu memungkinkan Anda gaya sekitar kotak centang, kecuali jika Anda mulai bermain dengan mencoba untuk menyembunyikannya dan melukis di atasnya yang akan memiliki masalah sendiri.
Nah, satu-satunya browser yang memungkinkan Anda menata kotak centang itu sendiri adalah Opera. Membungkusnya di dalam div adalah solusi yang mungkin cukup baik, tetapi itu benar-benar tergantung pada apa yang Anda inginkan. IE benar-benar bertindak seperti Anda memasukkannya ke dalam div jika Anda mencoba memberi gaya pada kotak centang!
— kagum
7

Gaya kotak centang (dan banyak elemen masukan lainnya untuk materi itu) tidak benar-benar mungkin dengan css murni jika Anda ingin mengubah tampilan visual secara drastis.

Taruhan terbaik Anda adalah mengimplementasikan sesuatu seperti jqTransform yang benar-benar menggantikan input Anda dengan gambar dan menerapkan perilaku javascript padanya untuk meniru kotak centang (atau elemen lain dalam hal ini)

— ChrisR
sumber
4

Tidak, Anda masih tidak bisa menata kotak centang itu sendiri, tetapi saya (akhirnya) menemukan cara memberi gaya ilusi sambil tetap mempertahankan fungsinya dengan mengeklik kotak centang. Ini berarti Anda dapat mengalihkannya meskipun kursor tidak diam tanpa mengambil risiko memilih teks atau memicu seret dan lepas!

Contohnya adalah menggunakan "tombol" span serta beberapa teks dalam label, tetapi ini memberi Anda gambaran tentang bagaimana Anda dapat membuat kotak centang tidak terlihat dan menggambar apa pun di belakangnya.

Solusi ini mungkin juga cocok dengan tombol radio.

Yang berikut ini bekerja di IE9, FF30.0 dan Chrome 40.0.2214.91 dan hanya contoh dasar. Anda masih dapat menggunakannya dalam kombinasi dengan gambar latar belakang dan elemen semu.

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>&nbsp;</span>Label text
</label>
— LGT
sumber
2

Berikut adalah cara sederhana (untuk digunakan sebelum atau sesudah elemen / kelas semu):

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 */
}
— Alex Fang
sumber
Saya rasa ini adalah cara cerdas untuk mengatur ulang kotak centang Anda dan hal-hal seperti ini.
— Alex Fang
1
Tidak berfungsi di Firefox dan IE. Lebih penting lagi, ini merupakan salah implementasi Chrome, karena unsur kekosongan tidak diperbolehkan untuk memiliki isi apapun.
— Leo
Leo, Anda salah mengartikan istilah "isi", yang dikatakan adalah elemen kosong itu tidak boleh ada konten di antaranya karena tidak ada tag penutup. misalnya <a> konten </a> memiliki tag penutup sehingga bisa ada konten di antara tag tersebut. tetapi input tidak memiliki tag penutup sehingga tidak dapat memuat isi secara prinsip. Di sisi lain, Pseudo-elemen memiliki properti yang disebut "konten" yang dapat digunakan di mana saja.
— pendingfox
-1 

<!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>
Luaskan cuplikan

— KeepLearn
sumber
Pertama: ": setelah" buat √; Kedua: "-webkit-appearance: none" biarkan gaya origion tidak bisa berfungsi, lalu Anda bisa menentukan gaya Anda.
— KeepLearn
2
Silakan tulis uraian singkat tentang jawaban Anda.
— Angel F Syrus
-5

letakkan di div dan tambahkan batas ke div

— Midhat
sumber
5
Kemudian Anda akan memiliki batas ganda.
— Egor Pavlikhin
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Kotak Centang Saya </input> </div> berfungsi dengan baik dengan htmlsandbox
— Midhat
8
Tentukan 'berfungsi dengan baik'. Misalnya, saya belum pernah melihat kotak centang dengan lebar 120px.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Midhat
sumber
7
@lexu Tidak ada yang namanya </input>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.