CSS ใส่สไตล์ช่องใส่เช็ค

สไตล์ใดก็ได้ที่inputมีผลกับองค์ประกอบอินพุตทุกตัว มีวิธีในการระบุสไตล์เพื่อใช้กับช่องทำเครื่องหมายเท่านั้นโดยไม่ต้องใช้คลาสกับองค์ประกอบกล่องกาเครื่องหมายแต่ละรายการหรือไม่?

ด้วย CSS 2 คุณสามารถทำสิ่งนี้:

input[type='checkbox'] { ... }

สิ่งนี้ควรได้รับการสนับสนุนอย่างกว้างขวางในตอนนี้ ดูการสนับสนุนเบราว์เซอร์

ฉันสร้างโซลูชันของตัวเองโดยไม่มีป้ายกำกับ

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

บางสิ่งที่ฉันค้นพบเมื่อเร็ว ๆ นี้สำหรับการจัดแต่งทรงผมปุ่มวิทยุและช่องทำเครื่องหมาย ก่อนหน้านี้ฉันต้องใช้ jQuery และสิ่งอื่น ๆ แต่นี่มันง่ายมาก

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

คุณสามารถทำเช่นเดียวกันสำหรับช่องทำเครื่องหมายอย่างเห็นได้ชัดเปลี่ยนinput[type=radio]ไปinput[type=checkbox]และการเปลี่ยนแปลงไปborder-radius:15px;border-radius:4px;

หวังว่านี่จะเป็นประโยชน์กับคุณ

ชั้นเรียนทำงานได้ดีเช่น:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

คุณสามารถใช้กับแอตทริบิวต์บางอย่างได้โดยทำ:

input[type="checkbox"] {...}

มันอธิบายได้ที่นี่

input[type="checkbox"] {
 /* your style */
}

แต่จะใช้ได้กับเบราว์เซอร์ยกเว้น IE7 และด้านล่างเท่านั้นสำหรับเบราว์เซอร์ที่คุณจะต้องใช้คลาส

ตรีศูลจัดเตรียม::-ms-checkองค์ประกอบหลอกสำหรับช่องทำเครื่องหมายและปุ่มตัวเลือก ตัวอย่างเช่น:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

จะแสดงดังต่อไปนี้ใน IE10 บน Windows 8:

เนื่องจาก IE6 ไม่เข้าใจตัวเลือกคุณลักษณะคุณสามารถรวมสคริปต์ที่เห็นโดย IE6 เท่านั้น (พร้อมความคิดเห็นแบบมีเงื่อนไข) และ jQuery หรือIE7.jsโดย Dean Edwards

IE7 (.js) เป็นไลบรารี JavaScript เพื่อให้ Microsoft Internet Explorer ทำงานเหมือนเบราว์เซอร์ที่ได้มาตรฐาน มันแก้ไขปัญหา HTML และ CSS จำนวนมากและทำให้ PNG แบบโปร่งใสทำงานได้อย่างถูกต้องภายใต้ IE5 และ IE6

ทางเลือกของการใช้คลาสหรือ jQuery หรือ IE7.js ขึ้นอยู่กับสิ่งที่คุณชอบและไม่ชอบและความต้องการอื่น ๆ ของคุณ (อาจเป็นความโปร่งใส PNG-24 ทั่วทั้งไซต์ของคุณโดยไม่ต้องพึ่งพา PNG-8 ด้วยความโปร่งใสที่สมบูรณ์ - สร้างโดยดอกไม้ไฟและ pngnq เท่านั้น)

แม้ว่า CSS จะให้วิธีการในการทำรูปแบบเฉพาะของช่องทำเครื่องหมายหรือประเภทอื่น แต่จะมีปัญหากับเบราว์เซอร์ที่ไม่รองรับสิ่งนี้

ฉันคิดว่าตัวเลือกเดียวของคุณในกรณีนี้คือจะใช้คลาสกับช่องทำเครื่องหมายของคุณ

เพียงเพิ่ม class = "ช่องทำเครื่องหมาย" ในช่องทำเครื่องหมายของคุณ

จากนั้นสร้างสไตล์นั้นในรหัส css ของคุณ

สิ่งหนึ่งที่คุณสามารถทำได้คือ:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

จากนั้นใช้ CSS เฉพาะของ IE ประกอบด้วย:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

คุณจะต้องเพิ่มคลาสเพื่อให้ทำงานใน IE และจะไม่ทำงานในเบราว์เซอร์อื่นที่ไม่ใช่ IE ที่ไม่รองรับ IE แต่มันจะทำให้เว็บไซต์ของคุณคิดด้วยโค้ด css และเมื่อ IE ได้รับการสนับสนุนคุณจะสามารถลบโค้ด css เฉพาะเช่นและคลาส css จากช่องทำเครื่องหมาย