วิธีปลอมปุ่มให้ดูเหมือนช่องทำเครื่องหมาย

ฉันมีกล่องกาเครื่องหมายที่เมื่อคลิกแล้วจำเป็นต้องส่งแบบฟอร์ม แม้จะไม่ได้รับความช่วยเหลือจากจาวาสคริปต์ก็ตาม ดังนั้นฉันจึงสร้างแบบฟอร์มที่มีปุ่มเดียวอยู่ข้างใน และพยายามปลอมปุ่มนั้นเป็นช่องทำเครื่องหมาย

จนถึงตอนนี้ฉันมีสิ่งนี้เป็น HTML ของฉัน:

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

และนี่คือ CSS ของฉัน:

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

ฉันขาดอะไรไปในการทำให้คลาสนี้เข้ากันได้กับ IE, Safari, Opera ฯลฯ

นอกจากนี้ ฉันจะทำให้ปุ่มปรากฏถูกตรวจสอบได้อย่างไร


checkbox html css
person johnnyodonnell    schedule 06.04.2018    source แหล่งที่มา
comment
แม้จะไม่มีความช่วยเหลือจากจาวาสคริปต์ แต่คุณต้องใช้ JavaScript เพื่อส่งแบบฟอร์มโดยใช้เพียงช่องทำเครื่องหมาย   -  person Mikey    schedule 06.04.2018
comment
@Mikey ฉันไม่ได้ใช้ช่องทำเครื่องหมายจริง ฉันใช้ปุ่มและปลอมปุ่มนั้นเป็นช่องทำเครื่องหมาย   -  person johnnyodonnell    schedule 06.04.2018

คำตอบ (3)


arrow_upward
2
arrow_downward

นอกเหนือจากคำตอบก่อนเกี่ยวกับการเพิ่ม คำนำหน้าผู้ขาย คุณก็สามารถทำได้ ปรากฏถูกตรวจสอบโดยเพิ่มเครื่องหมายถูกใน 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>

เห็นได้ชัดว่า Firefox จะไม่แสดงเนื้อหาใดๆ ภายในปุ่ม ดังนั้นฉันไม่แนะนำให้ใช้ appearance แต่เพียงใส่เครื่องหมายถูกไว้ในปุ่ม แล้วมันจะดูเหมือนช่องทำเครื่องหมาย ไม่ใช่ช่องทำเครื่องหมายเริ่มต้นใน Firefox แต่ถ้าคุณทนไม่ได้ จะต้องใช้การซ้อนทับหรือ svg เพื่อแก้ไข

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

person Taki    schedule 06.04.2018
comment
ดูเหมือนว่าเครื่องหมายถูกจะไม่ปรากฏใน Firefox - person johnnyodonnell; 06.04.2018
comment
ใช่ Firefox จะไม่ยอมให้คุณใส่เนื้อหาใด ๆ ลงในปุ่มโดยใช้ -moz-appearance ฉันอัปเดตคำตอบของฉันเพื่อใช้เป็นทางเลือกอื่น - person Taki; 06.04.2018

arrow_upward
2
arrow_downward

-ms-appearance สำหรับ IE และ -o-appearance สำหรับ Opera

นี่เรียกว่าคำนำหน้าผู้ขาย

person Megoh    schedule 06.04.2018
comment
ขอบคุณเพื่อน! จะทำให้ปุ่มปรากฏถูกตรวจสอบได้อย่างไร? เป็นไปได้ไหม? - person johnnyodonnell; 06.04.2018
comment
แล้วเบราว์เซอร์อื่นล่ะ? Firefox, Chroom, ซาฟารี? - person H. Pauwelyn; 06.04.2018

arrow_upward
0
arrow_downward

คุณสามารถใช้ 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 จะไม่ส่งแบบฟอร์ม - person Taki; 06.04.2018
comment
เขาทำกับ js ได้ - person Giacomo Ciampoli; 06.04.2018
comment
บรรทัดแรกของคำถามคือ : 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
ใช่ @Taki ถูกต้อง ฉันต้องการสิ่งนี้เพื่อให้ทำงานโดยไม่มีจาวาสคริปต์ - person johnnyodonnell; 06.04.2018