設計HTML 單選按鈕以類似於政府機構表單的複選框
為了創建與原始表單,它有必要將電子版本上的單選按鈕設定為類似於列印目的的複選框。雖然傳統方法涉及創建一個單獨的複選框來隱藏每個單選按鈕並同步其功能,但有更有效的方法。
使用現代 CSS3 的外觀屬性,可以變更單選按鈕的外觀以模仿複選框。 Firefox、Chrome、Safari 和 Opera 等流行瀏覽器均支援此方法。透過將 -webkit-appearance 和 -moz-appearance 屬性設為“checkbox”,這些瀏覽器將顯示具有方形複選框樣式的單選按鈕。
以下是範例程式碼片段:
input[type="radio"] { -webkit-appearance: checkbox; /* Chrome, Safari, Opera */ -moz-appearance: checkbox; /* Firefox */ -ms-appearance: checkbox; /* not currently supported */ }
<label><input type="radio" name="radio"> Checkbox 1</label> <label><input type="radio" name="radio"> Checkbox 2</label>
此解決方案有效地將單選按鈕轉換為類似複選框的元素,提高了列印表單的視覺準確性,並保持了單選按鈕的易用性螢幕。
以上是如何將 HTML 單選按鈕設定為可列印政府表格的複選框?的詳細內容。更多資訊請關注PHP中文網其他相關文章!