Màu nền radio đầu vào CSS

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

  Các phần tử

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  6 thuộc loại

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  7 thường được sử dụng trong các nhóm radio—tập hợp các nút radio mô tả một tập hợp các tùy chọn liên quan

  Chỉ có thể chọn một nút radio trong một nhóm nhất định cùng một lúc. Các nút radio thường được hiển thị dưới dạng các vòng tròn nhỏ, được lấp đầy hoặc tô sáng khi được chọn

  Chúng được gọi là các nút radio vì chúng trông và hoạt động theo cách tương tự như các nút ấn trên radio kiểu cũ, chẳng hạn như nút được hiển thị bên dưới

  Ghi chú. Các hộp kiểm tương tự như các nút radio, nhưng có một điểm khác biệt quan trọng. các nút radio được thiết kế để chọn một giá trị trong một tập hợp, trong khi các hộp kiểm cho phép bạn bật và tắt các giá trị riêng lẻ. Khi có nhiều điều khiển, các nút radio cho phép chọn một trong số tất cả các điều khiển đó, trong khi các hộp kiểm cho phép chọn nhiều giá trị

  Thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 là một chuỗi chứa giá trị của nút radio. Giá trị không bao giờ được hiển thị cho người dùng bởi tác nhân người dùng của họ. Thay vào đó, nó được sử dụng để xác định nút radio nào trong nhóm được chọn

  Một nhóm radio được xác định bằng cách cho mỗi nút radio trong nhóm giống nhau. Khi một nhóm radio được thiết lập, việc chọn bất kỳ nút radio nào trong nhóm đó sẽ tự động bỏ chọn bất kỳ nút radio nào hiện được chọn trong cùng một nhóm

  Bạn có thể có bao nhiêu nhóm radio trên một trang tùy thích, miễn là mỗi nhóm đều có

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  9 độc đáo của riêng mình

  Ví dụ: nếu biểu mẫu của bạn cần hỏi người dùng về phương thức liên hệ ưa thích của họ, bạn có thể tạo ba nút radio, mỗi nút có thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  9 được đặt thành

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  2 nhưng một có giá trị

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  3, một có giá trị

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  4 và một có giá trị . Người dùng không bao giờ nhìn thấy

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 hoặc

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  9 (trừ khi bạn thêm mã rõ ràng để hiển thị nó)

  HTML kết quả trông như thế này

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
  
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
  
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  

  Tại đây, bạn thấy ba nút radio, mỗi nút có

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  9 được đặt thành

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  2 và mỗi nút có một

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 duy nhất xác định duy nhất nút radio riêng lẻ đó trong nhóm. Mỗi cái cũng có một

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  1 duy nhất, được sử dụng bởi thuộc tính của phần tử

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  2 để liên kết các nhãn với các nút radio

  Bạn có thể thử ví dụ này tại đây

  Khi biểu mẫu trên được gửi với một nút radio được chọn, dữ liệu của biểu mẫu bao gồm một mục trong biểu mẫu

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  4. Ví dụ: nếu người dùng nhấp vào nút radio "Điện thoại" rồi gửi biểu mẫu, dữ liệu của biểu mẫu sẽ bao gồm dòng

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  5

  Nếu bạn bỏ qua thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 trong HTML, dữ liệu biểu mẫu đã gửi sẽ gán giá trị

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  7 cho nhóm. Trong trường hợp này, nếu người dùng nhấp vào tùy chọn "Điện thoại" và gửi biểu mẫu, thì dữ liệu biểu mẫu thu được sẽ là

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  8, điều này không hữu ích. Vì vậy, đừng quên đặt thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 của bạn

  Ghi chú. Nếu không có nút radio nào được chọn khi gửi biểu mẫu, thì nhóm radio hoàn toàn không được bao gồm trong dữ liệu biểu mẫu đã gửi vì không có giá trị nào để báo cáo

  Khá hiếm khi thực sự muốn cho phép gửi biểu mẫu mà không có bất kỳ nút radio nào trong nhóm được chọn, do đó, thông thường nên có một nút mặc định ở trạng thái

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  30. Xem bên dưới

  Hãy thêm một chút mã vào ví dụ của chúng tôi để chúng tôi có thể kiểm tra dữ liệu được tạo bởi biểu mẫu này. HTML được sửa đổi để thêm một khối

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  31 để xuất dữ liệu biểu mẫu thành

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  Sau đó, chúng tôi thêm một số JavaScript để thiết lập trình xử lý sự kiện trên sự kiện

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  32, được gửi khi người dùng nhấp vào nút "Gửi"

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  Hãy thử ví dụ này và xem cách không bao giờ có nhiều hơn một kết quả cho nhóm

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  2

  Ngoài các thuộc tính chung được chia sẻ bởi tất cả các phần tử

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  6, đầu vào

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  7 hỗ trợ các thuộc tính sau

  Thuộc tính Boolean, nếu có, cho biết rằng nút radio này là nút được chọn mặc định trong nhóm

  Không giống như các trình duyệt khác, Firefox theo mặc định duy trì trạng thái được kiểm tra động của một

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  6 khi tải trang. Sử dụng thuộc tính để kiểm soát tính năng này

  Thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 là thuộc tính mà tất cả các

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  6 chia sẻ; . khi một biểu mẫu được gửi, chỉ các nút radio hiện đang được kiểm tra mới được gửi tới máy chủ và giá trị được báo cáo là giá trị của thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8. Nếu

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  8 không được chỉ định khác, thì đó là chuỗi

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  7 theo mặc định. Điều này đã được chứng minh ở phần trên

  Thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  36 là thuộc tính mà hầu hết các

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  6 chia sẻ. Nếu bất kỳ nút radio nào trong nhóm nút radio cùng tên có thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  36, nút radio trong nhóm đó phải được chọn, mặc dù nút đó không nhất thiết phải là nút có thuộc tính được áp dụng

  Chúng tôi đã đề cập đến các nguyên tắc cơ bản của các nút radio ở trên. Bây giờ chúng ta hãy xem xét các tính năng và kỹ thuật phổ biến khác liên quan đến nút radio mà bạn có thể cần biết về

  Để làm cho nút radio được chọn theo mặc định, bạn bao gồm thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  30, như được hiển thị trong phiên bản sửa đổi này của ví dụ trước

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  3

  Trong trường hợp này, nút radio đầu tiên hiện được chọn theo mặc định

  Ghi chú. Nếu bạn đặt thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  30 trên nhiều nút radio, các phiên bản sau sẽ ghi đè các phiên bản trước đó; . Điều này là do chỉ có thể chọn một nút radio trong một nhóm cùng một lúc và tác nhân người dùng sẽ tự động bỏ chọn những nút khác mỗi khi một nút mới được đánh dấu là đã chọn

  Trong các ví dụ trên, bạn có thể nhận thấy rằng bạn có thể chọn một nút radio bằng cách nhấp vào phần tử

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  2 được liên kết của nó, cũng như trên chính nút radio đó. Đây là một tính năng thực sự hữu ích của nhãn biểu mẫu HTML giúp người dùng dễ dàng nhấp vào tùy chọn họ muốn, đặc biệt là trên các thiết bị màn hình nhỏ như điện thoại thông minh

  Ngoài khả năng truy cập, đây là một lý do chính đáng khác để thiết lập đúng các yếu tố

  const form = document.querySelector("form");
  const log = document.querySelector("#log");
  
  form.addEventListener(
    "submit",
    (event) => {
      const data = new FormData(form);
      let output = "";
      for (const entry of data) {
        output = `${output}${entry[0]}=${entry[1]}\r`;
      }
      log.innerText = output;
      event.preventDefault();
    },
    false
  );
  

  2 trên biểu mẫu của bạn

  Các nút radio không tham gia xác thực ràng buộc;

  Ví dụ sau đây cho thấy một phiên bản kỹ lưỡng hơn một chút của ví dụ mà chúng ta đã thấy trong suốt bài viết, với một số kiểu dáng bổ sung và với ngữ nghĩa tốt hơn được thiết lập thông qua việc sử dụng các phần tử chuyên biệt. HTML trông như thế này

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  3

  CSS liên quan đến ví dụ này quan trọng hơn một chút

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  9

  Đáng chú ý nhất ở đây là việc sử dụng thuộc tính

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  95 (với các tiền tố cần thiết để hỗ trợ một số trình duyệt). Theo mặc định, các nút radio (và hộp kiểm) được tạo kiểu theo kiểu gốc của hệ điều hành cho các điều khiển đó. Bằng cách chỉ định

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  96, bạn có thể loại bỏ hoàn toàn kiểu gốc và tạo kiểu của riêng bạn cho chúng. Ở đây, chúng tôi đã sử dụng một

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  97 cùng với một

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  98 và một

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  99 để tạo ra một lựa chọn radio sinh động đẹp mắt. Cũng lưu ý cách lớp giả

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  60 được sử dụng để chỉ định kiểu cho giao diện của nút radio khi được chọn

  Ghi chú. Nếu bạn muốn sử dụng tài sản

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  95, bạn nên kiểm tra nó thật cẩn thận. Mặc dù nó được hỗ trợ trong hầu hết các trình duyệt hiện đại, nhưng việc triển khai nó rất khác nhau. Trong các trình duyệt cũ hơn, ngay cả từ khóa

  <form>
    <fieldset>
      <legend>Please select your preferred contact method:legend>
      <div>
        <input type="radio" id="contactChoice1" name="contact" value="email" />
        <label for="contactChoice1">Emaillabel>
        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phonelabel>
        <input type="radio" id="contactChoice3" name="contact" value="mail" />
        <label for="contactChoice3">Maillabel>
      div>
      <div>
        <button type="submit">Submitbutton>
      div>
    fieldset>
  form>
  <pre id="log">pre>
  

  62 cũng không có tác dụng tương tự trên các trình duyệt khác nhau và một số trình duyệt hoàn toàn không hỗ trợ từ khóa này. Sự khác biệt nhỏ hơn trong các trình duyệt mới nhất

  Lưu ý rằng khi nhấp vào nút radio, sẽ có hiệu ứng giảm dần/mờ dần đẹp mắt khi hai nút thay đổi trạng thái. Ngoài ra, kiểu dáng và màu sắc của chú giải và nút gửi được tùy chỉnh để có độ tương phản mạnh. Đây có thể không phải là giao diện bạn muốn trong một ứng dụng web thực, nhưng nó chắc chắn thể hiện các khả năng

  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 để áp dụng CSS cho nút radio?

  Cách tạo nút radio tùy chỉnh .

  trưng bày. chặn; . liên quan đến; . 35px;.

  Chức vụ. tuyệt đối; . 0; . con trỏ;.

  Chức vụ. tuyệt đối; . 0; . 0;.

  màu nền. #ccc;

  màu nền. #2196F3;

  Nội dung. ""; . tuyệt đối; . không ai;

  trưng bày. chặn;

  hàng đầu. 9px; . 9px;

  Màu nhấn trong CSS là gì?

  Thuộc tính CSS có màu nhấn đặt màu nhấn cho các điều khiển giao diện người dùng do một số phần tử tạo ra .