Làm cách nào để thay đổi màu của các nút radio?

Ý tôi là, bản thân một nút radio bao gồm một hình tròn và một dấu chấm ở tâm (khi nút được chọn). Điều tôi muốn thay đổi là màu sắc của cả hai. Điều này có thể được thực hiện bằng cách sử dụng CSS?

Nút radio là một phần tử gốc cụ thể cho từng hệ điều hành / trình duyệt. Không có cách nào để thay đổi màu / kiểu của nó, trừ khi bạn muốn triển khai hình ảnh tùy chỉnh hoặc sử dụng thư viện Javascript tùy chỉnh bao gồm hình ảnh (ví dụ: liên kết này - liên kết được lưu trong bộ nhớ cache )

Một cách khắc phục nhanh chóng là sử dụng cách sử dụng lớp phủ kiểu nhập nút radio :after, tuy nhiên, có lẽ bạn nên tạo bộ công cụ tùy chỉnh của riêng mình.

    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"/>

Như Fred đã đề cập, không có cách nào để tạo kiểu nguyên bản cho các nút radio liên quan đến màu sắc, kích thước, etcc. Nhưng bạn có thể sử dụng các phần tử CSS Pseudo để thiết lập kẻ giả mạo bất kỳ nút radio nhất định nào và tạo kiểu cho nó. Chạm vào những gì JamieD đã nói, về cách chúng ta có thể sử dụng phần tử: after Pseudo, bạn có thể sử dụng cả hai: before và: after để đạt được một diện mạo mong muốn.

Lợi ích của phương pháp này:

• Tạo kiểu cho nút radio của bạn và cũng Bao gồm nhãn cho nội dung.
• Thay đổi màu viền ngoài và / hoặc vòng tròn đã chọn thành bất kỳ màu nào bạn thích.
• Tạo cho nó một cái nhìn trong suốt với các sửa đổi đối với thuộc tính màu nền và / hoặc tùy chọn sử dụng thuộc tính opacity.
• Điều chỉnh kích thước của nút radio của bạn.
• Thêm các thuộc tính đổ bóng khác nhau chẳng hạn như chèn bóng đổ CSS khi cần thiết.
• Trộn thủ thuật CSS / HTML đơn giản này vào các hệ thống Grid khác nhau, chẳng hạn như Bootstrap 3.3.6, để nó khớp với phần còn lại của các thành phần Bootstrap của bạn một cách trực quan.

Giải thích về bản demo ngắn dưới đây:

• Thiết lập một khối nội dòng tương đối cho mỗi nút radio
• Ẩn nút radio gốc, không có cách nào để tạo kiểu trực tiếp.
• Tạo kiểu và căn chỉnh nhãn
• Xây dựng lại nội dung CSS trên: trước Pseudo-element để thực hiện 2 việc - tạo kiểu cho viền ngoài của nút radio và thiết lập phần tử xuất hiện đầu tiên (bên trái nội dung nhãn). Bạn có thể tìm hiểu các bước cơ bản về Pseudo-element tại đây - http://www.w3schools.com/css/css_pseudo_elements.asp
• Nếu nút radio được chọn, hãy yêu cầu nhãn để hiển thị nội dung CSS (dấu chấm được tạo kiểu trong nút radio) sau đó.

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;
}

Một bản demo ngắn để xem nó hoạt động

Kết luận, không cần JavaScript, hình ảnh hoặc pin. CSS thuần túy.

Chỉ khi bạn đang nhắm mục tiêu các trình duyệt dựa trên webkit (Chrome và Safari, có thể bạn đang phát triển Chrome WebApp, ai biết được ...), bạn có thể sử dụng các cách sau:

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

Và sau đó tạo kiểu cho nó như thể nó là một phần tử HTML đơn giản, chẳng hạn như áp dụng hình nền.

Sử dụng input[type='radio']:activekhi đầu vào được chọn, để cung cấp đồ họa thay thế

Cập nhật : Kể từ năm 2018, bạn có thể thêm những thứ sau để hỗ trợ nhiều nhà cung cấp trình duyệt:

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

Bạn có thể đạt được các nút radio tùy chỉnh theo hai cách thuần CSS

1. Thông qua việc loại bỏ giao diện tiêu chuẩn bằng cách sử dụng CSS appearancevà áp dụng giao diện tùy chỉnh. Thật không may, điều này không hoạt động trong IE cho Máy tính để bàn (nhưng hoạt động trong IE cho Windows Phone). Bản giới thiệu:

   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>

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn mã

2. Thông qua ẩn nút radio và đặt giao diện nút radio tùy chỉnh thành trình dò labelgiả của. Nhân tiện, không cần định vị tuyệt đối ở đây (tôi thấy định vị tuyệt đối trong hầu hết các bản demo). Bản giới thiệu:

   *,
   *: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>

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn mã

bạn có thể sử dụng hack hộp kiểm như được giải thích trong thủ thuật css

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

ví dụ làm việc của nút radio:

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

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

Hoạt động trên IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome mọi thứ.

ví dụ về nút radio tùy chỉnh trình duyệt chéo đơn giản cho bạn

.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/

Để tạo thêm các phần tử, chúng ta có thể sử dụng: after,: before (vì vậy chúng ta không phải thay đổi HTML nhiều). Sau đó, đối với các nút radio và hộp kiểm, chúng ta có thể sử dụng: đã chọn. Có một số yếu tố giả khác mà chúng tôi cũng có thể sử dụng (chẳng hạn như: hover). Sử dụng hỗn hợp những thứ này, chúng ta có thể tạo ra một số biểu mẫu tùy chỉnh khá thú vị. kiểm tra điều này

Hãy thử css này với chuyển tiếp:

Bản giới thiệu

$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>

Tôi đã tạo một nhánh khác của mẫu mã @ klewis để chứng minh một số cách chơi với css và gradient thuần túy bằng cách sử dụng: before /: after pseudo phần tử và một nút nhập radio ẩn.

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;
}

xem trước: https://www.codeply.com/p/y47T4ylfib

Điều này không thể thực hiện được bởi CSS gốc. Bạn sẽ phải sử dụng hình nền và một số thủ thuật javascript.

Như đã nói, không có cách nào để đạt được điều này trong tất cả các trình duyệt, vì vậy cách tốt nhất để làm như vậy trình duyệt chéo là sử dụng javascript một cách không phô trương. Về cơ bản, bạn phải biến nút radio của mình thành các liên kết (hoàn toàn có thể tùy chỉnh thông qua CSS). mỗi lần nhấp vào liên kết sẽ được liên kết với radiobox liên quan, chuyển đổi trạng thái của anh ta và tất cả những người khác.

Có thể hữu ích khi liên kết nút radio với nhãn được tạo kiểu. Chi tiết hơn trong câu trả lời này .

Một cách thông minh để làm điều đó sẽ là tạo một div riêng biệt với chiều cao và chiều rộng là -for- 50px và sau đó bán kính 50px đặt nó trên các nút radio của bạn ...

Bạn có thể nhúng phần tử nhịp vào đầu vào radio, sau đó chọn màu bạn chọn để hiển thị khi đầu vào radio được chọn. Hãy xem ví dụ dưới đây được lấy từ 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>

Thay đổi màu nền ở đoạn mã này bên dưới thực hiện một mẹo nhỏ.

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

Có nguồn từ cách tạo nút radio tùy chỉnh

Một cách khắc phục đơn giản là sử dụng thuộc tính CSS sau.

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