更改單選按鈕的大小，它隱藏一個div裏面

我當前的代碼：更改單選按鈕的大小，它隱藏一個div裏面

<div class="answer_divs" id="a1" style="float:left;"> 
     <span class="answer_span"> 
      <input name="q1" type="radio" value="q1a1" style="width:10px"> 
      "Hello World"; 
     </span> 
    </div> 
    <div class="answer_divs" id="a2" style="float:right;"> 
     <span class="answer_span"> 
      echo "Hello World"; 
     </span> 
    </div> 

    <div class="answer_divs" id="a3" style="clear:both; float:left; margin-top:4px;"> 
     <span class="answer_span"> 
      Document.Write("Hello World"); 
     </span> 
    </div> 
    <div class="answer_divs" id="a4" style="float:right; margin-top:4px;"> 
     <span class="answer_span"> 
      System.out.print("Hello World"); 
     </span> 
    </div>

我的風格，這些潛水，它們看起來像按鈕。現在我想隱藏每個div內的單選按鈕，我希望它是這樣的 - 沒有mather我點擊一邊div，它會檢查單選按鈕。我不想讓單選按鈕被看到。

我試着用一些CSS改變單選按鈕的大小，然後用javascript隱藏它，但它沒有工作。我如何改變單選按鈕的大小？（爲了隱藏我使用jQuery）。

來源

2013-04-30 Edgar

你能告訴我們一個你已經擁有的jsfiddle嗎？ – Andrew 2013-04-30 10:36:10

取而代之的是DIV的，我建議你的風格了LABEL元素看起來像你的按鈕。

然後，只需絕對地將收音機輸入置於屏幕外，當用戶單擊LABEL元素時，使用LABEL的'for'屬性通過唯一ID將其與屏幕收音機輸入相關聯。

這也意味着你不依賴於任何JavaScript的優勢。

<input type="radio" value="myValue" id="myID" /> 

<label for="myID"></label>

來源

2013-04-30 10:42:46

您可以改爲改變輸入字段的可見性。 – 2013-04-30 10:56:55

如果您更改可見性或將其設置爲顯示：無，那麼它將影響可訪問性。 – 2013-04-30 11:11:19

的確如此，但這是OP設計方法中的一個問題。將按鈕從屏幕上移開的可能性會減小嗎？您提出了一個有效的觀點，值得在答案中加上一個腳註。 – 2013-04-30 11:27:53

你應該把單選按鈕放在div之外，最好是在之後，而不是div使用標籤。然後，您可以像製作div一樣設計標籤。

<input id="q1" name="q1" type="radio" value="q1a1" style="width:10px"> 
<label for="q1" class="answer_divs" id="a1" style="float:left;"> 
    <span class="answer_span"> 
     "Hello World"; 
    </span> 
</label>

然後你就可以使用CSS樣式是這樣的：

input:checked + label{ 
    //active CSS 
}

來源（S）

MDN - <label>

來源

2013-04-30 10:42:22 Bill

我會嘗試的東西如下：

<div class="answer_divs" id="a1" style="float:left;"> 
    <span class="answer_span"> 
      "Hello World"; 
     </span> 
    <input name="q1" type="radio" value="q1a1" style="width:10px"> 
</div>

採取單選按鈕，您<span>的外面再如下設置樣式：

.answer_divs input { 
    visibility: hidden; 
}

記住，這整個片段（和其他類似的）將被包裹在一個<form>元素中，所以不管你如何設計單選按鈕，因爲你將隱藏它們。

你需要創建一個jQuery動作，當你點擊.answer_divs時，它會檢查子輸入（radio）按鈕。

您也可以將文本包裝在<label>標記中，這樣當您單擊標籤時，它將檢查按鈕。但是請注意，光標（在Firefox中閃爍）將朝輸入字段本身移動，這可能會給您不同的用戶體驗。

小提琴：http://jsfiddle.net/audetwebdesign/AXF8p/

來源

2013-04-30 10:43:26

更改單選按鈕的大小，它隱藏一個div裏面

回答

相關問題