Hide radioButton with CSS

Question

Hide radioButton with CSS

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

I have a problem in a css style since I have a radiobuttons code in the form of a button that when you click on it, the radioButton is selected but I could not hide the radiobuttons so that it only shows the label as if it were a button, this is my code.

CSS

.panel { margin-bottom: 0px! important; }

#donate label {
    float: left;
    width: 30px;
    height: 32px;
    margin: 4px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: 1px solid #D0D0D0;
    overflow: hidden;
    cursor: pointer;
}

    #donate label span {
        text-align: center;
        font-size: 20px;
        padding: 3px 0px;
        display: block;
    }

    #donate label input {
        position: absolute;            
        /*top: -20px;*/
    }

#donate input:checked + span {
    background-color: #404040;
    color: #F7F7F7;
}

HTML

            <div class="col-md-4 text-center">
                <label class="col-sm-12 control-label" for="email-03">Estilo de fuente:</label>
                <div id="donate" style="z-index: 100">
                    <label><input type="radio" name="toggle"><span><strong>N</strong></span></label>
                    <label><input type="radio" name="toggle"><span>I</span></label>
                    <label><input type="radio" name="toggle"><span><u>S</u></span></label>
                </div>
            </div>

html5 css

asked by Ivxn 27.03.2018 в 19:09

source

2 answers

3

you can add this:

#donate label input {
    position: absolute;            
    display:none; /* <- agregado */
}

Also change the #donate label span to fill all the contents of the label well.

#donate label span {
    text-align: center;
    font-size: 20px;
    padding: 5px 0px; /* <- modificado */
    display: block;
}

$("input").change(function() {
  console.log($(this).val())
});

#donate label {
    float: left;
    width: 30px;
    height: 32px;
    margin: 4px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: 1px solid #D0D0D0;
    overflow: hidden;
    cursor: pointer;
}

#donate label span {
    text-align: center;
    font-size: 20px;
    padding: 5px 0px;
    display: block;
}

#donate label input {
    position: absolute;            
    display:none;
}

#donate input:checked + span {
    background-color: #404040;
    color: #F7F7F7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-4 text-center">
    <label class="col-sm-12 control-label" for="email-03">Estilo de fuente:</label>
    <div id="donate" style="z-index: 100">
        <label><input type="radio" name="toggle" value="1"><span><strong>N</strong></span></label>
        <label><input type="radio" name="toggle" value="2"><span>I</span></label>
        <label><input type="radio" name="toggle" value="3"><span><u>S</u></span></label>
    </div>
</div>

answered by 27.03.2018 в 19:23

Sum of huge numbers Why can not I see the sweetalert alert?

score 3 · Accepted Answer

To hide your radiobutton use the property opacity to give a transparency value between 0 and 1 being 1 non-transparent and 0 totally transparent.

Add an example of Jquery so you can see if a radiobutton selection is captured.

$("input").change(function() {
  alert("se seleciono un radiobutton");
});

.panel {
  margin-bottom: 0px !important;
}

#donate label {
  float: left;
  width: 30px;
  height: 32px;
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: hidden;
  cursor: pointer;
}

#donate label span {
  text-align: center;
  font-size: 20px;
  padding: 3px 0px;
  display: block;
}

#donate label input {
  position: absolute;
  opacity: 0;
  /*top: -20px;*/
}

#donate input:checked+span {
  background-color: #404040;
  color: #F7F7F7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 text-center">
  <label class="col-sm-12 control-label" for="email-03">Estilo de fuente:</label>
  <div id="donate" style="z-index: 100">
    <label><input type="radio" name="toggle"><span><strong>N</strong></span></label>
    <label><input type="radio" name="toggle"><span>I</span></label>
    <label><input type="radio" name="toggle"><span><u>S</u></span></label>
  </div>
</div>