MachForm Community Forums » MachForm 3

1. curtisio
   Member

   Does anyone know how to change the size of the checkboxes and maybe even the style on the tick using a png file?

   Posted 10 years ago #

2. AMurray
   Pro Member

   It'd be done through the CSS, for example, take a look here:

   http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css

   A whole heap more from a Google search.

   I presume that's the sort of thing you're after. I think you'd modify the css for the form in Machform, or in a custom CSS file. You'd have to know the 'element' you're styling and add the CSS to the appropriate places.

   Posted 10 years ago #

3. curtisio
   Member

   Thank you for your reply,

   Although I can get a checkbox styled with CSS in a html page I can't seem to style them in Machform.

   In CSS I style using the following:

   input[type="checkbox"] {
   display:none;
   }

   input[type="checkbox"] + label {
   color:#f2f2f2;
   font-family:Arial, sans-serif;
   font-size:14px;
   }

   input[type="checkbox"] + label span {
   display:inline-block;
   width:19px;
   height:19px;
   margin:-1px 4px 0 0;
   vertical-align:middle;
   cursor:pointer;
   background-image: url(check_radio_sheet.png);
   background-repeat: no-repeat;
   background-position: left top;
   }

   input[type="checkbox"]:checked + label span {
   background-image: url(check_radio_sheet.png);
   background-repeat: no-repeat;
   background-position: -19px top;
   }

   But it doesn't seem to work with Machform. Has anyone else come up with a work around?

   Posted 10 years ago #

4. curtisio
   Member

   I figured it out... below for anyone else wanting to do the same. Insert the following in view.css

   input[type="checkbox"] {
   	-webkit-appearance: none; /* webkit */
   	visibility: hidden;
   }
   
   input[type="checkbox"] + label::before {
   content: "";
   display: inline-block;
   width: 58px;
   height: 60px;
   background: url(../checkbox_untick.png) no-repeat;
   
   }
   
   input[type="checkbox"]:checked + label::before {
   
   content: "";
   display: inline-block;
   width: 58px;
   height: 60px;
   background: url(../checkbox_tick.png) no-repeat;}

   Posted 10 years ago #

5. offcourse
   Member

   Hi, thanks for this post. Two questions:

   1) Can you do this per theme, like using the advanced css area of the theme?
   2) Does this also work for radio?

   Thanks

   Posted 8 years ago #
6. 

   yuniar

   Yes, you can put them into each of your form's theme. Use the Advanced CSS area.

   ---

   MachForm Founder

   Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.