Web Form Builder Lite v. 2,4 Build 5318. OS X 10.9.4

Hi!
I would like to add some custom CSS to my form that effects all checkboxes.
Where should i do this? I know that i can export the form an edit the theme default css, but can't get that to work.

Is it possible to add custom css in the HTML element? This would be fantastic since then i can update my form much more easily

I have tried this in HTML element:

<style type='“text/css”'>input[type=checkbox] {
visibility: hidden;
}
</style>


Althou, that don't seem to work..
In fact, i would like to make the checkbox look like this:
http://www.paulund.co.uk/playground/dem … heckboxes/ (Checkbox four)


Code for this style:

input[type=checkbox] {
visibility: hidden;
}

<section>
<!-- Checbox Four -->
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>

/**
* Checkbox Four
*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;

border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/**
* Create the checkbox button
*/
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;

background: #333;

-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

/**
* Create the checked state
*/
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}



Thank you!

I got a respons that i can't put css in the HTML element that effects other elements.

So, I will have to keep looking for the right place to edit the checkbox element in the css-files then. That will work, right?

I would like to change how the element checkboxes look instead of adding my own HTML/CSS checkboxes. This is because i think it is easier when including them in the email notice. Also i haven't been able to get the form to work when adding the files to the server..

Thanks!

Can you explain a little more? You can put css in an html element that effects more then one element but if you want to target a specific one then you'll need to taget the css a little different or alter the html. There's many ways to accomplish this. JQuery being one of them.

Thank you for your answer Eric!

Well, i want to have checkboxes that look like toggle's. I find that it would me easier to edit the look of the checkbox element because it's easier to include them in the Email Notice that are sent after the form is filled.

I've found the checkbox that looks nice and the code is in #0. But i can't get the checkbox to respond to more then the:
{
visibility: hidden;
}

All the other css-code is with a class but i don't know which class to use so i can effect how the standard checkboxes look.

jQuery have some nice toogle buttons. Is it possible to add jQuery code in the HTML Element perhaps?

Thank you!

I've been using JQuery for several hacks to form builder. If you do a search on here you will probably find a few.

Thanks Eric!
Has that been with the elements or in the actual files that you then later have uploaded to your own server?

I've done it both ways. I have used the html element for several users to keep them from having to alter anything. It really depends on your needs.

Sounds great!
Well, in this case it would be to add a jQuery toggle button.
Like these: http://jqueryui.com/button/#checkbox

Tried to add that code into the element but that did not work..
I'm brand new to jQuery, well, as you perhaps noticed i'm rather new to all of this


Thanks Eric!

I tested it and it will require you to alter the form html to use the JQuery.ui.
http://ericrohloff.com/coffeecup/ccforu … ckbox.html