ฉันจะเปลี่ยนสีของปุ่มตัวเลือกได้อย่างไร?

ฉันหมายถึงปุ่มตัวเลือกประกอบด้วยรูปทรงกลมและจุดตรงกลาง (เมื่อเลือกปุ่ม) สิ่งที่ฉันต้องการเปลี่ยนคือสีของทั้งสองอย่าง สามารถทำได้โดยใช้ CSS หรือไม่?

ปุ่มตัวเลือกเป็นองค์ประกอบดั้งเดิมที่เฉพาะเจาะจงสำหรับแต่ละ OS / เบราว์เซอร์ ไม่มีวิธีใดในการเปลี่ยนสี / รูปแบบเว้นแต่คุณต้องการใช้รูปภาพที่กำหนดเองหรือใช้ไลบรารี Javascript ที่กำหนดเองซึ่งรวมถึงรูปภาพ (เช่นลิงก์นี้ - แคช )

การแก้ไขอย่างรวดเร็วคือการซ้อนทับรูปแบบการป้อนปุ่มตัวเลือกโดยใช้:afterแต่อาจเป็นแนวทางปฏิบัติที่ดีกว่าในการสร้างชุดเครื่องมือของคุณเอง

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

ดังที่เฟร็ดกล่าวไว้ไม่มีวิธีใดที่จะใช้ปุ่มตัวเลือกสไตล์ดั้งเดิมในเรื่องสีขนาดและอื่น ๆ แต่คุณสามารถใช้องค์ประกอบ CSS Pseudo เพื่อตั้งค่าตัวปลอมของปุ่มตัวเลือกที่กำหนดและจัดรูปแบบได้ เมื่อสัมผัสกับสิ่งที่ JamieD พูดเกี่ยวกับวิธีที่เราสามารถใช้องค์ประกอบ: after Pseudo คุณสามารถใช้ทั้งก่อนและหลังเพื่อให้ได้รูปลักษณ์ที่ต้องการ

ประโยชน์ของแนวทางนี้:

• จัดรูปแบบปุ่มตัวเลือกของคุณและรวมป้ายกำกับสำหรับเนื้อหา
• เปลี่ยนสีขอบล้อด้านนอกและ / หรือวงกลมที่ทำเครื่องหมายเป็นสีที่คุณต้องการ
• ให้รูปลักษณ์ที่โปร่งใสด้วยการปรับเปลี่ยนคุณสมบัติสีพื้นหลังและ / หรือการใช้คุณสมบัติทึบแสง
• ปรับขนาดของปุ่มตัวเลือกของคุณ
• เพิ่มคุณสมบัติเงาต่างๆเช่น CSS drop shadow inset ตามต้องการ
• ผสมผสานเคล็ดลับ CSS / HTML ง่ายๆนี้เข้ากับระบบ Grid ต่างๆเช่น Bootstrap 3.3.6 เพื่อให้ตรงกับส่วนประกอบ Bootstrap ที่เหลือของคุณด้วยสายตา

คำอธิบายของการสาธิตสั้น ๆ ด้านล่าง:

• ตั้งค่าบล็อกในบรรทัดสัมพัทธ์สำหรับปุ่มตัวเลือกแต่ละปุ่ม
• ซ่อนปุ่มตัวเลือกแบบเนทีฟซึ่งไม่มีวิธีใดที่จะกำหนดรูปแบบโดยตรง
• จัดรูปแบบและจัดแนวฉลาก
• สร้างเนื้อหา CSS ใหม่บน: ก่อนองค์ประกอบ Pseudo เพื่อทำ 2 สิ่ง - จัดรูปแบบขอบด้านนอกของปุ่มตัวเลือกและตั้งค่าองค์ประกอบให้ปรากฏก่อน (ด้านซ้ายของเนื้อหาป้ายกำกับ) คุณสามารถเรียนรู้ขั้นตอนพื้นฐานเกี่ยวกับองค์ประกอบ Pseudo ได้ที่นี่ - http://www.w3schools.com/css/css_pseudo_elements.asp
• หากเลือกปุ่มตัวเลือกให้ขอป้ายกำกับเพื่อแสดงเนื้อหา CSS (จุดสไตล์ในปุ่มตัวเลือก) หลังจากนั้น

HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

การสาธิตสั้น ๆเพื่อดูการใช้งานจริง

สรุปได้ว่าไม่จำเป็นต้องใช้ JavaScript รูปภาพหรือแบตเตอรี่ CSS บริสุทธิ์

เฉพาะในกรณีที่คุณกำหนดเป้าหมายไปที่เบราว์เซอร์ที่ใช้ webkit (Chrome และ Safari บางทีคุณอาจกำลังพัฒนา Chrome WebApp ใครจะรู้ ... ) คุณสามารถใช้สิ่งต่อไปนี้:

input[type='radio'] {
   -webkit-appearance: none;
}

จากนั้นจัดรูปแบบให้เหมือนกับว่าเป็นองค์ประกอบ HTML อย่างง่ายตัวอย่างเช่นการใช้ภาพพื้นหลัง

ใช้input[type='radio']:activeสำหรับเมื่ออินพุตถูกเลือกเพื่อให้กราฟิกทางเลือก

อัปเดต : ในปี 2018 คุณสามารถเพิ่มสิ่งต่อไปนี้เพื่อรองรับผู้จำหน่ายเบราว์เซอร์หลายราย:

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

คุณสามารถบรรลุปุ่มตัวเลือกที่กำหนดเองได้ด้วย CSS สองวิธี

1. ด้วยการลบรูปลักษณ์มาตรฐานโดยใช้ CSS appearanceและใช้รูปลักษณ์ที่กำหนดเอง น่าเสียดายที่สิ่งนี้ใช้ไม่ได้ใน IE สำหรับเดสก์ท็อป (แต่ใช้งานได้กับ IE สำหรับ Windows Phone) การสาธิต:

   input[type="radio"] {
     /* remove standard background appearance */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* create custom radiobutton appearance */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     /* background-color only for content */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked {
     background-color: #93e026;
   }
   
   /* optional styles, I'm using this for centering radiobuttons */
   .flex {
     display: flex;
     align-items: center;
   }

   <div class="flex">
     <input type="radio" name="radio" id="radio1" />
     <label for="radio1">RadioButton1</label>
   </div>
   <div class="flex">
     <input type="radio" name="radio" id="radio2" />
     <label for="radio2">RadioButton2</label>
   </div>
   <div class="flex">
     <input type="radio" name="radio" id="radio3" />
     <label for="radio3">RadioButton3</label>
   </div>

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายข้อมูลโค้ด

2. ผ่านการซ่อนปุ่มเรดิโอและการตั้งค่าลักษณะปุ่มกดวิทยุแบบกำหนดเองเป็นตัวเลือกlabelหลอกของ โดยวิธีการที่ไม่จำเป็นต้องมีตำแหน่งที่แน่นอนที่นี่ (ฉันเห็นตำแหน่งที่แน่นอนในการสาธิตส่วนใหญ่) การสาธิต:

   *,
   *:before,
   *:after {
     box-sizing: border-box;
   }
   
   input[type="radio"] {
     display: none;
   }
   
   input[type="radio"]+label:before {
     content: "";
     /* create custom radiobutton appearance */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     margin-right: 3px;
     /* background-color only for content */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked + label:before {
     background-color: #93e026;
   }
   
   /* optional styles, I'm using this for centering radiobuttons */
   label {
     display: flex;
     align-items: center;
   }

   <input type="radio" name="radio" id="radio1" />
   <label for="radio1">RadioButton1</label>
   <input type="radio" name="radio" id="radio2" />
   <label for="radio2">RadioButton2</label>
   <input type="radio" name="radio" id="radio3" />
   <label for="radio3">RadioButton3</label>

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายข้อมูลโค้ด

คุณสามารถใช้แฮ็คช่องทำเครื่องหมายตามที่อธิบายไว้ในเทคนิค css

http://css-tricks.com/the-checkbox-hack/

ตัวอย่างการทำงานของปุ่มตัวเลือก:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

ทำงานใน IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome ทุกอย่าง

ตัวอย่างปุ่มตัวเลือกแบบกำหนดเองของเบราว์เซอร์ที่เรียบง่ายสำหรับคุณ

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}

<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

ในการสร้างองค์ประกอบพิเศษที่เราสามารถใช้ได้: after,: before (ดังนั้นเราจึงไม่ต้องเปลี่ยน HTML มากขนาดนั้น) จากนั้นสำหรับปุ่มตัวเลือกและช่องทำเครื่องหมายเราสามารถใช้: เลือก มีองค์ประกอบหลอกอื่น ๆ อีกเล็กน้อยที่เราสามารถใช้ได้เช่นกัน (เช่น: hover) การใช้ส่วนผสมเหล่านี้ทำให้เราสามารถสร้างรูปแบบที่กำหนดเองที่น่าสนใจได้ ตรวจสอบสิ่งนี้

ฉันสร้างทางแยกของตัวอย่างโค้ดของ @ klewisเพื่อสาธิตการเล่น css และการไล่ระดับสีที่บริสุทธิ์โดยใช้: before /: after pseudo elements และปุ่มอินพุตวิทยุที่ซ่อนอยู่

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

    <span class="radio-item">
        <input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
        <label for="ritemb">False</label>
    </span>
</div>

:

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

ดูตัวอย่าง: https://www.codeply.com/p/y47T4ylfib

ลองใช้ css นี้ด้วยการเปลี่ยนแปลง:

การสาธิต

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Html:

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

สิ่งนี้ไม่สามารถทำได้โดย CSS ดั้งเดิม คุณจะต้องใช้ภาพพื้นหลังและเทคนิคจาวาสคริปต์

อย่างที่กล่าวไว้ไม่มีทางที่จะบรรลุสิ่งนี้ได้ในทุกเบราว์เซอร์ดังนั้นวิธีที่ดีที่สุดในการทำ crossbrowser คือการใช้ javascript อย่างไม่ปิดบัง โดยทั่วไปคุณต้องเปลี่ยน radiobutton ของคุณให้เป็นลิงก์ (ปรับแต่งได้เต็มที่ผ่าน CSS) การคลิกแต่ละครั้งที่ลิงก์จะถูกผูกไว้กับกล่องวิทยุที่เกี่ยวข้องสลับสถานะของเขาและอื่น ๆ ทั้งหมด

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

วิธีที่ชาญฉลาดในการทำเช่นนี้คือการสร้าง div แยกต่างหากโดยมีความสูงและความกว้าง -for example- 50px จากนั้นรัศมี 50px วางสิ่งนี้ไว้เหนือปุ่มตัวเลือกของคุณ ...

คุณสามารถฝังองค์ประกอบช่วงในอินพุตวิทยุจากนั้นเลือกสีที่คุณต้องการเพื่อแสดงผลเมื่อเลือกอินพุตวิทยุ ดูตัวอย่างด้านล่างที่มาจาก w3schools

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

การเปลี่ยนสีพื้นหลังที่ส่วนโค้ดด้านล่างนี้เป็นการหลอกลวง

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

มาจากวิธีสร้างปุ่มตัวเลือกแบบกำหนดเอง

การแก้ไขง่ายๆคือการใช้คุณสมบัติ CSS ต่อไปนี้

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}