Can you put text to an input type radio? [duplicate]

Question

Can you put text to an input type radio? [duplicate]

Navigation

#1 by (3 votes)

1

I have a form with several radio-type inputs (only one can be selected).

The code is as follows:

<div class="form-group">
                <label><strong>Visible</strong></label><br>
                @if ($employee->public==1)
                <p style="display:inline;"></p><input type="radio" name="public" value="1" class="visible" checked>
                <p style="display:inline;"></p><input type="radio" name="public" value="0" class="novisible">
                @elseif ($employee->public==0)
                <p style="display:inline;"></p><input type="radio" name="public" value="1" class="visible">
                <p style="display:inline;"></p><input type="radio" name="public" value="0" class="novisible" checked>
                @endif
</div>

It is a form to indicate if the 'data' is visible or not.

The view looks like this, if it is selected that is NOT visible:

If it is selected that IS is visible:

The CSS is the following:

input[type=radio]{
    &.visible{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    height: 30px;
    width: 60px;
    background: grey;
    border-radius: 10px;
    margin: 0px;
    }
    &.visible:checked{
        background: #5cb85c; 
    }

}
input[type=radio]{
    &.novisible{
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        height: 30px;
        width: 60px;
        background: grey;
        border-radius:10px;
        margin:0px;
    }
    &.novisible:checked{
        background: #d9534f;
    }
}

Is there any possible way to put a text to the input? Maybe the best option is to make bootstrap buttons and 'make them type radio'?

Thank you.

html css bootstrap

asked by Lluís Puig Ferrer 18.09.2017 в 10:57

source

1 answer

Select from a dictionary the list with the least elements Date operations in Excel VBA

score 3 · Accepted Answer

The simplest way is to associate labels with the radio inputs and hide the input. In this way you can format the labels as you want and clicking on them will activate and deactivate the inputs:

input[type=radio]{
  display: none;
}
input[type=radio]+label{
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
    border-radius: 10px;
    margin: 0px;
    background: grey;
}
input[type=radio].visible:checked+label{
    background: #5cb85c; 
}
input[type=radio].novisible:checked+label{
        background: #d9534f;
}

<div class="form-group">
    <label><strong>Visible</strong></label><br>
    <input type="radio" name="public" id="public1" value="1" class="visible" checked>
    <label for="public1">Sí</label>
    <input type="radio" name="public" id="public0" value="0" class="novisible">
    <label for="public0">No</label>
</div>