ผมอยากทราบว่าจะมีวิธีการเขียน css อย่างเพื่อที่จะทำให้ ส่วนของ checkbox นั้นหายไป แบบไม่ใช้แค่การซ่อน
- ตอนนี้ผมได้เขียนส่วนการทำ checkbox ไว้ 2 แบบ คือ เอาไว้แสดงผลในจอโทรศัพ กับ ในจอคอมพิวเตอร์ ครับ
- โดยในจอโทรศัพนั้นจะมีการ ร่วมเอาหัวข้อและ ckeckbox อยู่ใน tag <dt> เดียวกัน
- แต่ในจอคอมนั้นจะมีการแยกออก ระหว่างหัวข้อ กับ ckeckbox
- Selection_999(1919).png (34.92 KiB) Viewed 1174 times
โดยโคด HTML ที่ผมใช้เขียนจะมีประมาณนี้ครับ
โค้ด: เลือกทั้งหมด
<dl style="clear: left;">
<dt style="margin-bottom: -5px;"><label for="mod_anonymous">{L_ANONYMUS}{L_COLON}
// แสดงน้าจอโทรศัพ
<input style=" width: 18px; height: 16px;" class="anonymous" type="checkbox" value="1" name="mod_anonymous" tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span> </label></dt>
//แสดงในจอคอมพิวเตอร์
<dd>
<input class="checkbox_anonymous" type="checkbox" style=" width: 18px;
height: 16px;" value="1" name="mod_anonymous" tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span>
</dd>
</dl>
โดยโคด CSS ที่ผมใช้เขียนจะมีประมาณนี้ครับ
โค้ด: เลือกทั้งหมด
@media screen and (max-width: 700px) {
.hidden {display:block;}
.checkbox_anonymous {
visibility: hidden;
width: 18px;
height: 16px;
}
}
@media screen and (min-width:700px) {
.hidden {display:block;}
.anonymous {
visibility: hidden;
width: 18px;
height: 16px;
}
}
- ปัญหาที่จอก็คือว่า เมือส่ง mod_anonymous ไปใช้งานนั้น มีการส่งค่าที่ผิด เนื่องจาก ว่า จะมีส่วนที่ถูกซ่อนไว้นั้นเอง
- จึงอยากที่จะทำให้ส่วนที่ไม่ต้องการหายไป เวลาที่ แสดงผลในอีก รูปแบบ 1 ครับ
ผมอยากทราบว่าจะมีวิธีการเขียน css อย่างเพื่อที่จะทำให้ ส่วนของ checkbox นั้นหายไป แบบไม่ใช้แค่การซ่อน
- ตอนนี้ผมได้เขียนส่วนการทำ checkbox ไว้ 2 แบบ คือ เอาไว้แสดงผลในจอโทรศัพ กับ ในจอคอมพิวเตอร์ ครับ
- โดยในจอโทรศัพนั้นจะมีการ ร่วมเอาหัวข้อและ ckeckbox อยู่ใน tag <dt> เดียวกัน
[attachment=1]Selection_999(1919).png[/attachment]
- แต่ในจอคอมนั้นจะมีการแยกออก ระหว่างหัวข้อ กับ ckeckbox
[attachment=0]Selection_999(1920).png[/attachment]
โดยโคด HTML ที่ผมใช้เขียนจะมีประมาณนี้ครับ
[code]<dl style="clear: left;">
<dt style="margin-bottom: -5px;"><label for="mod_anonymous">{L_ANONYMUS}{L_COLON}
// แสดงน้าจอโทรศัพ
<input style=" width: 18px; height: 16px;" class="anonymous" type="checkbox" value="1" name="mod_anonymous" tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span> </label></dt>
//แสดงในจอคอมพิวเตอร์
<dd>
<input class="checkbox_anonymous" type="checkbox" style=" width: 18px;
height: 16px;" value="1" name="mod_anonymous" tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span>
</dd>
</dl>[/code]
โดยโคด CSS ที่ผมใช้เขียนจะมีประมาณนี้ครับ
[code]@media screen and (max-width: 700px) {
.hidden {display:block;}
.checkbox_anonymous {
visibility: hidden;
width: 18px;
height: 16px;
}
}
@media screen and (min-width:700px) {
.hidden {display:block;}
.anonymous {
visibility: hidden;
width: 18px;
height: 16px;
}
}
[/code]
- ปัญหาที่จอก็คือว่า เมือส่ง mod_anonymous ไปใช้งานนั้น มีการส่งค่าที่ผิด เนื่องจาก ว่า จะมีส่วนที่ถูกซ่อนไว้นั้นเอง
- จึงอยากที่จะทำให้ส่วนที่ไม่ต้องการหายไป เวลาที่ แสดงผลในอีก รูปแบบ 1 ครับ