如何隱藏無線電盒的複選框？

Question

我想隱藏一個我正在創建的窗體上的radiobox的複選框。你可以看到這裏的問題：

http://46.101.59.121/projects/citynew/index.php

 <div class="col-xs-6" style="margin-top:20px"> 
      <div class="row"> 
      <input id="buy" checked="checked" name="format" type="radio" value="sales"/><label for="buy" class="typebutton radio_img_label">Buy</label> 
      </div> 
     </div> 

     <div class="col-xs-6" style="margin-top:20px"> 
      <div class="row"> 
      <input id="rent" name="format" type="radio" value="lettings"/><label for="rent" class="typebutton radio_img_label">Rent</label> 
      </div> 
     </div> 

這是我的HTML和我的CSS是

.typebutton { 
    background-color: #fff; 
    border: 2px solid #fff; 
    font-weight: normal; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px 15px; 
    text-align: center; 
    width: 100%; 
} 

我怎樣才能做到這一點？

在此先感謝！

保羅

Answer 1

您可以添加

.row input[type=radio] {display:none} 

到你的CSS。

Answer 2

只是一個類添加到單選按鈕來隱藏它像

<div class="col-xs-6" style="margin-top:20px"> 
    <div class="row"> 
     <input id="buy" class="typebutton" checked="checked" name="format" type="radio" value="sales"/><label for="buy" class="typebutton radio_img_label">Buy</label> 
    </div> 
</div> 

<div class="col-xs-6" style="margin-top:20px"> 
    <div class="row"> 
     <input id="rent" class="typebutton" name="format" type="radio" value="lettings"/><label for="rent" class="typebutton radio_img_label">Rent</label> 
    </div> 
</div> 

然後

input.typebutton { 
    display: none; 
} 
label.typebutton { 
    background-color: #fff; 
    border: 2px solid #fff; 
    font-weight: normal; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px 15px; 
    text-align: center; 
    width: 100%; 
} 

Answer 3

試試這個：

.typebutton { 
    background-color: #FFF; 
    border: 2px solid #FFF; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px 15px; 
    text-align: center; 
    font-weight: normal; 
    width: 100%; 
    position: absolute;//add this 
    left: 0;//add this 
}