Nút radio css đã chọn thay đổi màu nền

Việc tạo kiểu các phần tử đầu vào radio gốc trên nhiều trình duyệt khó hơn một chút so với mức cần thiết. Trong những năm qua, rất nhiều blog đã thảo luận về chủ đề này và cung cấp nhiều cách giải quyết khác nhau về kiểu dáng. Hầu hết các giải pháp liên quan đến việc hiển thị các phần tử giả bổ sung như

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #ffa500;
  position: absolute;
  top: 2px;
  left: 2px;
}

CSS hiện đại để giải cứu

Với một số CSS đơn giản và hiện đại, giờ đây chúng ta có thể tạo kiểu cho các phần tử input của nút radio thậm chí còn dễ dàng hơn. Dưới đây là ba tùy chọn khác nhau, mỗi tùy chọn đều có ưu và nhược điểm. Bạn có thể thử các tùy chọn khác nhau trong CodePen bên dưới

Xem cây bút
Các nút radio được tạo kiểu bởi Bryntum (@bryntum)
trên CodePen

Sử dụng màu nhấn

Thuộc tính CSS Accent-color tạo kiểu cho một số phần tử gốc bằng cách thay đổi màu nhấn của chúng. Tài sản này được hỗ trợ rộng rãi vào năm 2022. Nhưng nó không được hỗ trợ đầy đủ và hầu hết các trình duyệt chỉ bắt đầu hỗ trợ nó vào năm 2021

body {
  accent-color: red;
}

ưu

• Đơn giản để sử dụng

Nhược điểm

• kiểu dáng thấp
• Không được hỗ trợ đầy đủ

Sử dụng bóng hộp

Cả hai giải pháp bóng hộp và phác thảo đều được thực hiện bằng cách ẩn giao diện gốc của phần tử. Và sau đó với sự kết hợp của nền, đường viền và vòng tròn bên ngoài, chúng tôi tạo ra một giao diện mới sẽ dễ tạo kiểu hơn

input {

  /* The native appearance is hidden */
  appearance: none;
  -webkit-appearance: none;

  /* For a circular appearance we need a border-radius. */
  border-radius: 50%;

  /* The background will be the radio dot's color. */
  background: #FF572233;

  /* The border will be the spacing between the dot and the outer circle */
  border: 3px solid #FFF;

  /* And by creating a box-shadow with no offset and no blur, we have an outer circle */
  box-shadow: 0 0 0 1px #FF5722;
}

ưu

• hỗ trợ đầy đủ
• tính phong cách cao

Nhược điểm

• Quy mô xấu trong một số môi trường

Sử dụng phác thảo

Giải pháp phác thảo áp dụng kỹ thuật tương tự như giải pháp bóng hộp, nhưng thay vào đó, tạo vòng tròn bên ngoài bằng cách sử dụng thuộc tính phác thảo. Đường viền được hỗ trợ rộng rãi, nhưng không kết hợp với bán kính đường viền không hoạt động như mong đợi trong Safari

Lưu ý rằng đường viền là kiểu tiêu điểm mặc định của trình duyệt. Khi thay đổi kiểu phác thảo, bạn phải luôn ghi nhớ khả năng truy cập

input {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  background: #e8e8e8;
  border: 3px solid #FFF;

  /* The outline will be the outer circle */
  outline: 1px solid #999;
}

ưu

• Cân tốt hơn bóng hộp
• tính phong cách cao
• Không ảnh hưởng đến bố cục

Nhược điểm

• No Safari support

Cái nào để chọn?

Trong 5 sắp tới. Trong lần phát hành đầu tiên, chúng tôi tại Bryntum đã quyết định sử dụng tùy chọn `box-shadow` trong tiện ích nút Radio của chúng tôi. Nó cung cấp giao diện đáng tin cậy trên nhiều trình duyệt và nó tương thích với các trình duyệt cũ hơn một chút. Bạn có thể thấy điều này đang hoạt động trong hộp thoại giải quyết xung đột của chúng tôi trong Scheduler Pro

Sử dụng các biểu mẫu ninja, tôi đã tạo một biểu mẫu có bảng câu hỏi với các nút radio. Mỗi câu hỏi có hai nút radio là ĐẠT và KHÔNG ĐẠT Sử dụng CSS, tôi đã cố gắng xóa vòng tròn và sử dụng toàn bộ nhãn làm nút. Tôi đã đi được nửa đường, tôi có thể làm cho nhãn hoạt động như một nút nhưng tôi không thể ẩn vòng tròn của nút. Vấn đề khác của tôi và tôi không chắc làm thế nào để thực hiện điều này. Mỗi câu hỏi có hai lựa chọn mục tiêu của tôi là gì khi di chuột qua hoặc chọn “ĐẠT” tôi muốn nó tô sáng màu xanh lục và khi di chuột qua hoặc chọn “THẤT BẠI” tôi muốn nó tô sáng màu đỏ. Khác xa so với những gì tôi đã viết trong CSS, cả hai lựa chọn đều tô sáng màu xanh lục cả ĐẠT và Không đạt. Ai đó có thể giúp tôi tìm ra cách ẩn vòng tròn của nút radio và thực hiện đánh dấu như tôi đã mô tả ở trên không? . Dưới đây là những gì tôi có cho đến nay và được đăng trong giao diện CSS bổ sung>chủ đề>tùy chỉnh

.nf-form-cont input[type=radio], .nf-form-cont input[type=checkbox] {
    display:none !important; 
}
 
.nf-form-cont input[type=radio] + label, .nf-form-cont input[type=checkbox] + label {
    padding: 5px 10px !important;
    background-color: #e7e7e7 !important;
    border-color: #ddd !important;
    transition: background-color 0.3s ease-in-out !important;
      border-radius: 3px !important;
}
 
.nf-form-cont input[type=radio]:checked + label, .nf-form-cont input[type=checkbox]:checked + label, .nf-form-cont input[type=radio]:checked + label, .nf-form-cont input[type=radio] + label:hover, .nf-form-cont input[type=checkbox] + label:hover {
    background-image: none !important;
    background-color: #b95d52 !important;
      color: #ffffff !important;
    cursor: pointer !important;
}
 
.nf-form-cont ul li {
    margin: 5px !important;
}

Đang xem 1 trả lời (trong tổng số 1)

• Hỗ trợ plugin curtisbrownlee

  (@curtisbrownlee)

  Xin chào,

  Tôi đã kiểm tra CSS trên trang web địa phương của mình

  Tôi tin rằng việc tắt “Kiểu có ý kiến” sẽ cho phép loại bỏ bong bóng

  Trong trang web WordPress của bạn, vui lòng điều hướng đến Ninja Forms > Settings > Advanced Settings. Tại đây, vui lòng thử đặt danh sách thả xuống “Kiểu được chọn” thành “Không” và lưu cài đặt

  Về màu sắc của nhãn trường Radio, một đề xuất có thể là thử CSS nhắm mục tiêu giá trị của từng đầu vào

  Làm cách nào để thay đổi màu nền của nút nhấp trong CSS?

  Để thay đổi màu nền của nút, hãy sử dụng thuộc tính màu nền CSS và đặt cho nó một giá trị màu sắc theo sở thích của bạn . bên trong. bộ chọn nút, bạn sử dụng màu nền. #0a0a23; .

  Làm cách nào để thay đổi màu nền bằng nút radio trong HTML?

  Vâng, bạn nói đúng, có thể thực hiện mà không cần viết thẻ tập lệnh. Vì vậy, logic đằng sau chương trình rất đơn giản. Chúng tôi bắt đầu với việc tạo ba nút radio có tên là đỏ, lục, lam bên trong thẻ biểu mẫu và sử dụng thuộc tính có tên onClick và gán giá trị cho tài liệu. bgcolor=tên màu cho nó .

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

  Kiểu nút radio tùy chỉnh .

  Bước 1. Ẩn đầu vào radio bản địa. #.

  Bước 2. Các kiểu radio không được chọn tùy chỉnh. #.

  Bước 3. Cải thiện đầu vào so với. Căn chỉnh nhãn. .

  Bước 4. Các. trạng thái đã kiểm tra. #.

  Bước 5. Các. tập trung Nhà nước. #

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

  // Tạo nút radio RadioButton r1 = new RadioButton(); . Sau khi tạo RadioButton, đặt thuộc tính BackColor của RadioButton do lớp RadioButton cung cấp. // Đặt màu nền cho nút radio r1. BackColor = Color .