CODEWITHSUNDEEP
jqueryhtmlcss
Paolo Resteghini
Paolo Resteghini

Reputation: 432

How do I hide the checkboxes from a radiobox?

I am trying to hide the checkboxes from a radiobox on a form that I'm creating. You can see the issue here:

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>

That's my HTML and my CSS is 

.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%;
}

How can i achieve this?

Thanks in advance!

Paolo

Upvotes: 2

Views: 70

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

Just add a class to the radio button to hide it like

<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>

then

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%;
}

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Try this:

.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
}

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

You can add 

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

to your css.

Upvotes: 2

Related Questions