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
}

如何隐藏radiobox中的复选框？

3 个答案: