Cara menyamarkan tombol agar terlihat seperti kotak centang

Saya punya kotak centang yang ketika diklik harus mengirimkan formulir, bahkan tanpa bantuan javascript. Jadi, saya membuat formulir dengan satu tombol di dalamnya dan mencoba menyamarkan tombol itu sebagai kotak centang.

Sejauh ini saya memiliki ini sebagai HTML saya:

<form>
    <button class="checkbox" type="submit">
    </button>
</form>

Dan ini CSS saya:

.checkbox {
    padding: 0;
    height: 13px;
    width: 13px;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}

Apa yang saya lewatkan agar kelas ini kompatibel dengan IE, Safari, Opera, dll?

Juga, bagaimana saya bisa membuat tombol tampak dicentang?


checkbox html css
person johnnyodonnell    schedule 06.04.2018    source sumber
comment
bahkan tanpa bantuan javascript tetapi Anda memerlukan JavaScript untuk mengirimkan formulir hanya dengan menggunakan kotak centang.   -  person Mikey    schedule 06.04.2018
comment
@Mikey Saya tidak menggunakan kotak centang yang sebenarnya. Saya menggunakan tombol dan menyamarkan tombol itu sebagai kotak centang   -  person johnnyodonnell    schedule 06.04.2018

Jawaban (3)


arrow_upward
2
arrow_downward

selain jawaban sebelumnya tentang menambahkan awalan vendor Anda dapat membuatnya muncul dicentang dengan menambahkan tanda centang di html

.checkbox {
   height: 25px;
   width: 25px;
   -webkit-appearance: checkbox;
   -moz-appearance: checkbox;
   -ms-appearance: checkbox; 
   -o-appearance: checkbox;
   appearance: checkbox;
}
    <button class="checkbox" type="submit">✔</button>

rupanya Firefox tidak akan menampilkan konten apa pun di dalam tombol, jadi saya sarankan untuk tidak menggunakan appearance tetapi cukup beri tanda centang di dalam tombol dan itu akan terlihat seperti kotak centang, bukan kotak centang default di Firefox tetapi jika Anda tidak dapat mentolerirnya, Anda harus menggunakan overlay atau svg untuk menyiasatinya

.checkbox {
  height: 25px;
  width: 25px;
  margin: 0;
  padding: 0;       
}
 <button class="checkbox" type="submit">✔</button>

person Taki    schedule 06.04.2018
comment
Sepertinya tanda centang tidak muncul di Firefox - person johnnyodonnell; 06.04.2018
comment
ya Firefox tidak mengizinkan Anda memasukkan konten apa pun ke dalam tombol menggunakan -moz-appearance , saya memperbarui jawaban saya untuk alternatif - person Taki; 06.04.2018

arrow_upward
2
arrow_downward

-ms-appearance untuk IE dan -o-appearance untuk Opera

Omong-omong, ini disebut awalan vendor.

person Megoh    schedule 06.04.2018
comment
Terima kasih teman-teman! Bagaimana kalau membuat tombolnya tampak dicentang? Apakah itu mungkin? - person johnnyodonnell; 06.04.2018
comment
Lalu bagaimana dengan browser lainnya? Firefox, Chroom, Safari? - person H. Pauwelyn; 06.04.2018

arrow_upward
0
arrow_downward

Anda dapat menggunakan svg:

.button{
  display: inline-block;
  width:20px;
  height:30px;
  padding:20px 30px;
  border:3px solid orangered;
  background:white;
  border-radius: 3px;
  position:relative;
  cursor:pointer;}
 
.icon {
  display: inline-block; 
  stroke-width: 0;
  width:30px;
  fill: orangered;
  position:absolute;
  line-height:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
 
}
<form class="form" action="">
  <button class="button">
  <svg class="icon icon-checkmark" viewbox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
  </svg>
  </button>
</form>

person Giacomo Ciampoli    schedule 06.04.2018
comment
a span tidak akan mengirimkan formulir - person Taki; 06.04.2018
comment
dia bisa melakukannya dengan js - person Giacomo Ciampoli; 06.04.2018
comment
baris pertama pertanyaannya adalah : I've a got checkbox that when clicked needs to submit a form, even without the help of javascript. - person Taki; 06.04.2018
comment
Ya, @Taki benar. Saya ingin ini berfungsi tanpa javascript - person johnnyodonnell; 06.04.2018