• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

Checkbox style not working properly

I have downloaded files for custom checkbox style from this page http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ and I'm trying to use my image. In the instructions It says that height property should be one fourth of the height of the full size images. I have changed that but it's not displaying correctly. Could you try, here is my image in attachement. What am I doing wrong?
checkbox-bg.gif
0
mankis
Asked:
mankis
  • 5
  • 3
1 Solution
 
mstrelanCommented:
Can you please post your HTML / CSS that you're using?
0
 
mankisAuthor Commented:
Here are the files for the testing purpose.
test-checkbox.html
custom-form-elements.js
form.css
0
 
mstrelanCommented:
It looks to me like the script only works in Webkit browsers (Chrome / Safari)
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/example/

Having said this, the author of the script seems to think it works in every browser. I would suggest trying to find a different script.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mstrelanCommented:
OOPS ignore my last comment. I had JS disabled.
0
 
mstrelanCommented:
Ok the main problem is that your css file is looking for checkbox_bg.gif but your file is checkbox-bg.gif

Secondly you need to adjust checkboxHeight in your js file to be a quarter of your image. This unfortunately is 56.5 and you can't have half a pixel. You will need to modify your image so that it is divisible by 4
0
 
mankisAuthor Commented:
Here is another image with height 200px. Have changed height in css into 50px but is still not working properly.
checkbox2.gif
0
 
mstrelanCommented:
You don't need to change the height in CSS... you need to modify the JS file. Read the big comment at the top saying

"The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)"
0
 
mankisAuthor Commented:
oh, It didn't get to my brain. Now is working. Thank you!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now