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ử
6 thuộc loạiPlease select your preferred contact method: Email Phone Mail Submit
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 quanPlease select your preferred contact method: Email Phone Mail SubmitChỉ 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
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ọnPlease select your preferred contact method: Email Phone Mail SubmitMộ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ó
9 độc đáo của riêng mìnhPlease select your preferred contact method: Email Phone Mail SubmitVí 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
9 được đặt thànhPlease select your preferred contact method: Email Phone Mail Submit
2 nhưng một có giá trịPlease select your preferred contact method: Email Phone Mail Submit
3, một có giá trịPlease select your preferred contact method: Email Phone Mail Submit
4 và một có giá trị . Người dùng không bao giờ nhìn thấyPlease select your preferred contact method: Email Phone Mail Submit
8 hoặcPlease select your preferred contact method: Email Phone Mail Submit
9 [trừ khi bạn thêm mã rõ ràng để hiển thị nó]Please select your preferred contact method: Email Phone Mail SubmitHTML kết quả trông như thế này
Please select your preferred contact method: Email Phone Mail SubmitTại đây, bạn thấy ba nút radio, mỗi nút có
9 được đặt thànhPlease select your preferred contact method: Email Phone Mail Submit
2 và mỗi nút có mộtPlease select your preferred contact method: Email Phone Mail Submit
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ộtPlease select your preferred contact method: Email Phone Mail Submit
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 radioconst 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 ];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
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òngconst 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 ];
5const 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 ];Nếu bạn bỏ qua thuộc tính
8 trong HTML, dữ liệu biểu mẫu đã gửi sẽ gán giá trịPlease select your preferred contact method: Email Phone Mail Submit
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ínhconst 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 của bạnPlease select your preferred contact method: Email Phone Mail SubmitGhi 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
30. Xem bên dướiPlease select your preferred contact method: Email Phone Mail SubmitHã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
31 để xuất dữ liệu biểu mẫu thànhPlease select your preferred contact method: Email Phone Mail SubmitPlease select your preferred contact method: Email Phone Mail SubmitSau đó, 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
32, được gửi khi người dùng nhấp vào nút "Gửi"Please select your preferred contact method: Email Phone Mail Submitconst 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
2Please select your preferred contact method: Email Phone Mail SubmitNgoài các thuộc tính chung được chia sẻ bởi tất cả các phần tử
6, đầu vàoPlease select your preferred contact method: Email Phone Mail Submit
7 hỗ trợ các thuộc tính sauPlease select your preferred contact method: Email Phone Mail SubmitThuộ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
6 khi tải trang. Sử dụng thuộc tính để kiểm soát tính năng nàyPlease select your preferred contact method: Email Phone Mail SubmitThuộc tính
8 là thuộc tính mà tất cả cácPlease select your preferred contact method: Email Phone Mail Submit
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ínhPlease select your preferred contact method: Email Phone Mail Submit
8. NếuPlease select your preferred contact method: Email Phone Mail Submit
8 không được chỉ định khác, thì đó là chuỗiPlease select your preferred contact method: Email Phone Mail Submit
7 theo mặc định. Điều này đã được chứng minh ở phần trênconst 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 ];Thuộc tính
36 là thuộc tính mà hầu hết cácPlease select your preferred contact method: Email Phone Mail Submit
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ínhPlease select your preferred contact method: Email Phone Mail Submit
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ụngPlease select your preferred contact method: Email Phone Mail SubmitChú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
30, như được hiển thị trong phiên bản sửa đổi này của ví dụ trướcPlease select your preferred contact method: Email Phone Mail Submit
3Please select your preferred contact method: Email Phone Mail SubmitTrong 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
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ọnPlease select your preferred contact method: Email Phone Mail SubmitTrong 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ử
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 minhconst 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 ];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ố
2 trên biểu mẫu của bạnconst 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 ];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
3Please select your preferred contact method: Email Phone Mail SubmitCSS liên quan đến ví dụ này quan trọng hơn một chút
9Please select your preferred contact method: Email Phone Mail SubmitĐáng chú ý nhất ở đây là việc sử dụng thuộc tính
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ỉ địnhPlease select your preferred contact method: Email Phone Mail Submit
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ộtPlease select your preferred contact method: Email Phone Mail Submit
97 cùng với mộtPlease select your preferred contact method: Email Phone Mail Submit
98 và mộtPlease select your preferred contact method: Email Phone Mail Submit
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ảPlease select your preferred contact method: Email Phone Mail Submit
60 được sử dụng để chỉ định kiểu cho giao diện của nút radio khi được chọnPlease select your preferred contact method: Email Phone Mail SubmitGhi chú. Nếu bạn muốn sử dụng tài sản
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óaPlease select your preferred contact method: Email Phone Mail Submit
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ấtPlease select your preferred contact method: Email Phone Mail SubmitLư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 .