Jump to content
  • 0

Radio Button to look like a checkbox


SuperNam

Question

6 answers to this question

Recommended Posts

  • 0

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>

image.png.f49dec00caa44cd8e0499533eef86d1b.png

- Natoy

Link to comment
Share on other sites

  • 0

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:
image.png.eeed922be6ce5ddd2613ce5e0010d868.png

Link to comment
Share on other sites

  • 0

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:

image.png.e1763526015d7e4ca3788556556ddfe7.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...