Radio Button to look like a checkbox

[SuperNam]

Is there a way to have the radio buttons to be square and have a check like in the check box?

[IamNatoyThatLovesYou]

Hello @SuperNam,

This is doable via CSS code. Just insert it in the header of the Datapage.

<style>
input[type="radio"]{
   appearance: none;
   border: 1px solid #d3d3d3;
   width: 30px;
   height: 30px;
   content: none;
   outline: none;
   margin: 0;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

input[type="radio"]:checked {
  appearance: none;
  outline: none;
  padding: 0;
  content: none;
  border: none;
}

input[type="radio"]:checked::before{
  position: absolute;
  color: green !important;
  content: "\00A0\2713\00A0" !important;
  border: 1px solid #d3d3d3;
  font-weight: bolder;
  font-size: 21px;
}
</style>

- Natoy

[Queso]

Hello,

Just to add, the following CSS code is what I use on my checkbox-style radio buttons: 
 

<style>
input[type="radio"]{
   appearance: none;
    background-color: #fff;
    width: 15px;
    height: 15px;
    border: 2px solid #ccc;
    border-radius: 2px;
    display: inline-grid;
    place-content: center; 
}

input[type="radio"]:checked {
 background-color:   #0075FF;
    border: 2px solid #0075FF;
}

input[type="radio"]:checked::before{
content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transform-origin: bottom left;
    background-color: #fff;
    clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}
</style>

The following image is what it looks like on my DataPage:

[IamNatoyThatLovesYou]

Hello Everyone, 

I found a similar post that uses emojis and images instead of the radio button looking like a checkbox. I hope this helps.

 

[Kurumi]

Hi - Just an update, if you would like to deselect radio buttons - you can check this forum post: 

 

[jnordstrand]

Hello Everyone,

 

Is there a way to get this type of view out of the Radio Buttons?  I was able to make Queso's solution to work but now I want to improve upon it.

 

Thank you,

Jeff

Pass Fail NA Example.docx

[autonumber]

Hi @jnordstrand - you can try the CSS code below.

<style>
input[type=radio]{
    display:none;
}
input[value=Pass] + label{
    border: 1px solid black;
    background-color: green;
   color: white;
    padding: 5px 10px 20px 15px !important;
}
input[value=Fail] + label{
    border: 1px solid black;
    background-color: red;
  color: white;
    padding: 5px 10px 20px 15px !important;
}
input[value="N/A"] + label{
    border: 1px solid black;
    background-color: grey;
  color: white;
    padding: 5px 10px 20px 15px !important;
}
input[value=Pass]:checked + label{
    background-color: #006400;
}
input[value=Fail]:checked + label{
    background-color: #8b0000;
}
input[value="N/A"]:checked + label{
    background-color: #555555;
}
</style>

Here's the result: