โซลูชัน HTML / CSS แบบ semantic ล้วนๆ
สิ่งนี้ง่ายต่อการติดตั้งด้วยตัวคุณเองโดยไม่จำเป็นต้องมีวิธีแก้ไขปัญหาล่วงหน้า นอกจากนี้มันจะสอนคุณอย่างมากเนื่องจากคุณดูไม่ง่ายกับ CSS
นี่คือสิ่งที่คุณต้องทำ:
ช่องทำเครื่องหมายของคุณต้องมีidแอตทริบิวต์ที่แตกต่าง นี้ช่วยให้คุณเชื่อมต่อ<label>กับมันโดยใช้ฉลากfor-attribute
ตัวอย่าง:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
การติดป้ายกำกับกับช่องทำเครื่องหมายจะก่อให้เกิดพฤติกรรมเบราว์เซอร์: เมื่อใดก็ตามที่มีคนคลิกที่ป้ายกำกับ (หรือภาพที่อยู่ภายใน) ช่องทำเครื่องหมายจะถูกสลับ
ถัดไปคุณซ่อนช่องทำเครื่องหมายโดยใช้ตัวอย่างdisplay: none;จากมัน
ตอนนี้สิ่งที่คุณต้องทำคือตั้งค่าสไตล์ที่คุณต้องการสำหรับlabel::beforeองค์ประกอบหลอกของคุณ(ซึ่งจะใช้เป็นองค์ประกอบทดแทนช่องทำเครื่องหมายภาพ):
label::before {
background-image: url(../path/to/unchecked.png);
}
ในขั้นตอนสุดท้ายที่ยุ่งยากคุณใช้ประโยชน์จาก:checkedตัวเลือกหลอกของ CSS เพื่อเปลี่ยนภาพเมื่อมีการทำเครื่องหมายในช่องทำเครื่องหมาย:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
+( ที่อยู่ติดกันพี่น้องเลือก ) ทำให้แน่ใจว่าคุณจะเปลี่ยนป้ายกำกับที่โดยตรงทำตามช่องทำเครื่องหมายที่ซ่อนอยู่ในมาร์กอัป
คุณสามารถปรับให้เหมาะสมด้วยการใส่ภาพทั้งสองลงใน spritemap และใช้การเปลี่ยนแปลงbackground-positionแทนการสลับรูปภาพเท่านั้น
แน่นอนคุณต้องไปที่ตำแหน่งฉลากอย่างถูกต้องและนำไปใช้display: block;และการตั้งค่าที่ถูกต้องและwidthheight
แก้ไข:
ตัวอย่างโค้ดและตัวอย่างที่ฉันสร้างขึ้นหลังจากคำแนะนำเหล่านี้ใช้เทคนิคเดียวกัน แต่แทนที่จะใช้รูปภาพสำหรับช่องทำเครื่องหมายการเปลี่ยนช่องทำเครื่องหมายจะทำด้วย CSS ล้วนๆและสร้าง::beforeบนฉลากที่เมื่อตรวจสอบcontent: "✓";แล้ว เพิ่มเส้นขอบโค้งมนและช่วงการเปลี่ยนภาพหวาน ๆ และผลลัพธ์ที่ได้ก็น่าพึงพอใจจริงๆ!
นี่คือ codepen ที่ใช้งานได้ซึ่งแสดงเทคนิคและไม่ต้องการรูปภาพสำหรับช่องทำเครื่องหมาย:
http://codepen.io/anon/pen/wadwpx
นี่คือรหัสเดียวกันในตัวอย่าง:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
