Jump to content
  • 0

Can I change the style of my checbox?


Glitch

Question

3 answers to this question

Recommended Posts

  • 0

You can change the style of your checkbox through custom CSS.

Add a header and footer on your form, disable HTML Editor and paste this code:

<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>

Then create an HTML block, (Disable HTML Editor) paste this code:

<label class="container">One
  <input id="cbx" type="checkbox">
<span class="checkmark"></span>
</label>

Set your Checkbox to "Hidden".

Finally, add this script to your footer

<script>

var cbx = document.querySelector('#cbx');
var chk_field = document.querySelector('[id*=check_box]');

cbx.onchange = function() {
chk_field.checked = cbx.checked;
}

</script>

 

Check out the screen shot and output of this: 

Screenshot1Screenshot2Screenshot3Screenshot4

Output

 

So what I did  here is I created a customized Checkbox and hid the checkbox field I have in Caspio.

The use of the script is to pass the value of the dummy checkbox I created so it can still the data. 

 

Let me know if this works for you @Vanellope:)

Link to comment
Share on other sites

  • 0

Hi everyone - Just wanted to share this solution for changing the color of the checkbox, you can insert this inside the Header.

<style>

input[id="InsertRecordFIELDNAME"] {
filter: hue-rotate(102deg) !important;
}

</style>

Result:
image.png

You can use these other properties as well:
accent-color: name of color - same here: 

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

filter: grayscale(1)

Hope it helps!

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...