造型單選按鈕沒有標簽

Question

我現在面臨這個問題：我想設置由系統生成的單選按鈕和復選框 ，並且沒有標簽 。

我正在使用IBM SPSS Data Collection進行在線調查，這意味着它根據我可以設計的一些模板（主要是CSS樣式）生成所有問題。

我發現了許多教程如何使用純CSS設置單選按鈕和復選框的樣式，問題是，所有這些都使用標簽： <label for="id"></label> 。 重點是，生成的代碼沒有<label> 。

正如我所說，對象沒有標簽，例如單個單選按鈕由此代碼定義（我還想附加截圖如何，但我沒有足夠的聲譽點）：

<td id="Cell.2.1" style="text-Align: Center;vertical-align: Middle;background-color: #e6efe6;width: 7%;border-color: Black;border-style: Solid;border-width: 0px;">
  <div></div>
  <input type="radio" name="_QQ3_Qa_QSingleResponseQuestion_C" id="_Q0_Q0_Q0_C1" class="mrSingle" style="font-family: Trebuchet MS;font-size: 9pt;" value="b"></input>
</td>

我試圖更改html代碼以添加標簽，但它確實有效，但這並不是我需要的。 這個解決方案出現的問題是，我不能讓系統旋轉集成主題（問題），因為頁面無法生成但必須明確寫入。

當我使用這個解決方案（不合適的解決方案）時，我可以簡單地使用CSS添加單選按鈕和復選框，添加如下背景圖像：

input[type=radio]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 40px;
  background   : url('radio_off.png') no-repeat 0 0;
  background-size:30px 30px;
  line-height  : 35px;
}

input[type=radio]:not(old):checked + label{
  background   : url('/radio_on.png') no-repeat 0 0;
  background-size:29px 29px;
}

所以我的問題是：

• 有沒有辦法重新設置單選按鈕和復選框沒有標簽？

要么

• 有沒有辦法使用javacsript或其他東西為生成的頁面上的每個單選按鈕或復選框添加假空白標簽？

要么

• 有沒有其他方法我可以解決這個問題，而無需編輯生成的頁面代碼，例如我可以使用頁面如何生成它？

如果我沒有包含任何必要的信息，請求他們，如果我能夠，我會提供他們。

非常感謝您的幫助！

問候，

彼得

Answer 1

---

沒有辦法用純CSS設置單選按鈕的樣式，但你可以用CSS和JavaScript混合，在收音機上放置一個假圖像並顯示沒有單選按鈕開頭，這樣做，無所謂如果你有標簽或沒有。 如果你不想制作自己的腳本，有幾個插件可以做到這一點：

• http://www.hongkiat.com/blog/css3-checkbox-radio/
• http://www.csscheckbox.com/radio-buttons.php
• 甚至我自己的插件： http ： //albertofortes.com/projects/piscoPrettyForms/

在我的插件中，你不需要標簽來設置單選按鈕的樣式，有一個標簽，但不用於樣式，所以你可以刪除它仍然有效。

查看使用Inspector工具編輯的代碼：

Answer 2

對於沒有標簽的單選按鈕的純CSS樣式，請嘗試以下操作：

input[type=radio]:not(old) {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border-radius: 1em;
  border: 3px solid #555;
}

input[type=radio]:not(old):checked{
  background-image: radial-gradient(circle at center, #555, #555 37.5%, #fff 40%, #fff 100%);
}

寬度，高度，邊框厚度和顏色都可以根據需要設計。

也可以使用以下內容將svg圖像用於已檢查和未檢查的狀態：

input[type=radio]:not(old) {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-image: url('unchecked.svg') no-repeat;
  background-size: cover;
  background-origin: center;
}

input[type=radio]:not(old):checked{
  background-image: url('checked.svg') no-repeat;
  background-size: cover;
  background-origin: center;
}