Input radio that looks checkbox?

Asked

Viewed 970 times

6

I need to do a quiz, and the alternatives are radio inputs, but it looks like custom checkbox.

What’s the best way to do that?

inserir a descrição da imagem aqui

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
    border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {

}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
    text-align: center;
    border: none !important;
    min-width: 54px;
    height: 25px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
}

.tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    margin-bottom: 7px;
    background-color: #1d1715;
    color: white;
    font-family: 'Citroen-bold-italic';
    font-size: 12pt;
    opacity: 0.5;
    padding: 3px;
}

.tabs-right > .nav-tabs > li > a:active {
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
    background-color: #f1ba26;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
    background-color: #f1ba26;
    opacity: 1;
    border-radius: 0;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid blue;
}

#quiz {
    font-family: 'Citroen-bold-italic';
    color: #fff;
}

#quiz {
    text-align: right;

}
   label {
display: inline-block;
cursor: pointer;
position: relative;
padding-right: 25px;
margin-left: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:after {
content: "";
display: inline-block;

width: 16px;
height: 16px;

margin-left: 0px;
position: absolute;
right: 0;
bottom: 1px;
background-color: #424242;
border: 2px solid #212121;
}
.radio label:after {
border-radius: 2px;
}
input[type=radio]:checked + label:after {
content: "\2713";
color: #E0E0E0;
font-size: 15px;
text-align: center;
line-height: 18px;
}
     <div class="tabbable tabs-right">
    <ul class="nav nav-tabs">
        <li class="active abas"><a href="#1" data-toggle="tab">1</a></li>
        <li><a href="#2" data-toggle="tab">2</a></li>
        <li><a href="#3" data-toggle="tab">3</a></li>
        <li><a href="#4" data-toggle="tab">4</a></li>
        <li><a href="#5" data-toggle="tab">5</a></li>
        <li><a href="#6" data-toggle="tab">6</a></li>
    </ul>
    <div class="tab-content">
 <div class="tab-pane active" id="1">
   <p>Lorem ipsum dolor sit amet, charetra varius quam sit vulputate.</p>
   <input id="1a" na type="radio"><label for="1a">Lorem ipsum dolor sit </label>
   <input id="1b" type="radio"> <label for="1b">Lorem ipsum dolor sit </label>
   <input id="1c" type="radio"><label for="1c">Lorem ipsum dolor sit </label>

      <button class="pull-right">RESPONDER</button>
 </div>

html html5 css3 checkbox radiobutton

  • Here you go several examples of stylization of a radio button, some with Javascript others only with CSS.

  • 1

    By the way, you ask for "checkbox", but the reference image looks more like a "toggle button" (from what I understand, this yellow "1" would be the option chosen, if the user clicked on "4" for example then it would turn yellow while "1" would be deleted. Is that it? ). What do you really want?

  • No. The tabs on the right are the question numbers.

  • What I’m looking for is a checkbox for the alternatives

  • 1

    Got it, the big text is the title and the three small texts are the alternatives... Is that as there was only one placeholder for the text, it was not clear what was what.

  • 3

    This question is being discussed at the Meta.

  • 1

    Hi Hendy. Glad you solved the problem ! I don’t know if you followed the discussion linked above by @mgibsonbr, but something happened here to avoid: you totally changed the question after there was already a posted answer (and voted). This does not work well here on the site, because the answer that already existed has not worked for the new question. In such cases, post a separate question (and include links to other, related ones if necessary). Here we have rules and mechanisms a little different from most other sites (forums), but over time you get the hang of it. Good learning!

  • @bfavaretto Thanks! I really failed at this point rs .

Show 3 more comments

2 answers

13


You can do this simply by using only css. What the code below does is basically re-style the label radio to look like a checkbox, hide the real radio and then replace it using the pseudo-element :before, you can do this using an image as well.

html, body {
    font-family: Arial, sans-serif;
    line-height: 20px;
}
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
input[type=radio] {
    display: none;
}
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #424242;
    border: 2px solid #212121;
}
.radio label:before {
    border-radius: 2px;
}
input[type=radio]:checked + label:before {
    content: "\2713";
    color: #E0E0E0;
    font-size: 15px;
    text-align: center;
    line-height: 18px;
}
<div class="radio">
    <b>Escolha um número:</b>
    <br />
    <input id="1" type="radio" name="option" value="1" />
    <label for="1">1</label>
    <br />
    <input id="2" type="radio" name="option" value="2" />
    <label for="2">2</label>
    <br />
    <input id="3" type="radio" name="option" value="3" />
    <label for="3">3</label>
    <br />
    <input id="4" type="radio" name="option" value="4" />
    <label for="4">4</label>
    <br />
    <input id="5" type="radio" name="option" value="5" />
    <label for="5">5</label>
</div>

  • 3

    +1 Complementing (because it seemed to me that the AP wants something like a toggle button - although in the question she asks for checkbox): this technique can be easily adapted only by styling the label and forgetting the part :before (or maybe using the :before to create the "arrow" to the left of the button, using edge properties).

  • I’m testing this method and the first input doesn’t work.. I can only select from the 2 down.. @mgibsonbr

  • You can show your form code?

  • I added the code to the question.

10

In the code you put in the op are missing the inputs Names. Without the equal Names it does not change the selection. 

html, body {
    font-family: Arial, sans-serif;
    line-height: 20px;
}
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
input[type=radio] {
    display: none;
}
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #424242;
    border: 2px solid #212121;
}
.radio label:before {
    border-radius: 2px;
}
input[type=radio]:checked + label:before {
    content: "\2713";
    color: #E0E0E0;
    font-size: 15px;
    text-align: center;
    line-height: 18px;
}
<div class="tab-pane active" id="1">
   <p>Lorem ipsum dolor sit amet, charetra varius quam sit vulputate.</p>
   <input id="1a" name="ab" type="radio"><label for="1a">Lorem ipsum dolor sit </label>
   <input id="1b" name="ab"type="radio"> <label for="1b">Lorem ipsum dolor sit </label>
   <input id="1c" name="ab" type="radio"><label for="1c">Lorem ipsum dolor sit </label>

      <button class="pull-right">RESPONDER</button>
 </div>

PS: I was going to post this in the comments, but I needed to have 50 reputation points, so I decided to post as a same answer. Anything, if not the case for an answer, please delete it. Here, clicking "run code" worked (and will even be useful to me) :) ...

  • 1

    +10 of reputation so you can start writing useful comments :)

  • 1

    Thanks! : ) It is very difficult to find something I know to answer here (beginner still)... I think I got lucky in this. :-)

Browser other questions tagged html html5 css3 checkbox radiobutton

You are not signed in. Login or sign up in order to post.