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

HTML Checkbox

What is wrong with this?

<tr>
                                                            <td align="right">Security Code*:&nbsp;</td>
                                                            <td> <input type="text" size="3" name="rap_scode" style="color: #000; background-color : #efefef; margin: 5px;"></td>
                                                            <td>&nbsp;</td>
                                                      </tr>
                                                      <tr>
                                                            <td colspan="3">Please note:  Service packages are non refundable and non transferable. <input type="checkbox" name="spnr">  Check to indicate you have read this statement.
                                                            </td>
                                                      </tr>      
                                                </table>
                                                <br>
                                                      <input type="submit" value="Continue">      
                                                </form>      

The page renders like this (in FireFox):

Security Code*:        <input field>       
Please note: Service packages are non refundable and non transferable. Check to indicate you have read this statement.

Where is the checkbox?

Can there be CSS that "hides" a checkbox?
0
Richard Korts
Asked:
Richard Korts
  • 7
  • 4
  • 4
1 Solution
 
Richard KortsAuthor Commented:
See attached css; this is the only css I can find that relates to checkboxes.

Thanks
bee-checkbox.css
0
 
sno0401Commented:
I've run this html locally and the checkbox shows where it should. This suggests that maybe there is some CSS that is "hiding" your checkbox. Can you search your CSS for anything like
input[type=checkbox]

Open in new window

and see if any unusual style rules are applied to it?
0
 
sno0401Commented:
Hi. Adding that CSS to my local file still allows the checkbox to be displayed. Can you post your HTML file itself (removing any sensitive data if necessary) and I can take a look at it?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Richard KortsAuthor Commented:
To sno0401

It's a custom page in a WordPress site. See attached php called page-review-and-pay.php

Also attached is the Theme css.
bee-stylesheet.css
page-review-and-pay.php
0
 
Richard KortsAuthor Commented:
I added inline styling to the checkbox; no change

<input type="checkbox" name="spnr" style="color: #000; background-color : #efefef; margin: 3px;">
0
 
COBOLdinosaurCommented:
If it is an HTML5 doctype, it is posible that the problem is that the input tags have not been closed and firefox can be picky about the omission.

Cd&
0
 
Richard KortsAuthor Commented:
To Cd& ,

It works fine in FF if you copy the html & put it in a page by itself (with no CSS).

http://www.rain1.com/new-site/chkbox_chk.html

It HAS to be the CSS.

Is there a way to nullify all css, like style="none";?

Thanks
0
 
COBOLdinosaurCommented:
There is no such thing a nullification of CSS, just property overrides and specificity.  You culd put it inline style="display:inline !important;" but it might break somwthing else or have enexpect consequences down the road that is no apparent right now.

Without a link to the page, there is no way for us to do diagbostics, and I don't see us lining up to wadw through a 72k CSS file that might or might not be the source of the issue.  However if it displays with no CSS and does not display with CSS then the conclusion we must draw is its in the CSS that is on that page, In the stylesheet is the most likely suspect; but that bloated bit of misery is full of incomprehensible, nonsense rules that break and disable the cascade on virtually everything they touch, and trying find anything without a page link would be like looking for a specific blade of grass on a thousand acre lawn.

Cd&
0
 
Richard KortsAuthor Commented:
I can't remember if you are a WordPress expert, that "horrible" css is the Standard for that theme.

I guess I'll have to use a radio button, although it's NOT the intuitive choice for this case.

If you want to take the time to see it in a browser, do the following:

1) Go to http://rain1.com/new-site/service-agreement/

2) pick zip code 43219.

3) On the next page, select 6, select the "yes" radio button.

4) Click "No" on Backflow Test Required

5) Choose either plan.

6) Checkbox supposed to be on bottom of the next page.

Thanks
0
 
COBOLdinosaurCommented:
I am a sort of accidental WP Expert.  The way they award points for cross-posted Qs results in me having an EE cert in WP, but I do not really work with the internals of WP.  I can often solve CSS, HTML and PHP issues simply because I know those technologies and the fact that they are in a WP sites is not relevant in a lot of cases.

As for the quality of the code; I understand the reason it is there, but I take issue with whomever built the theme.  While it is the case in about 90% of the WP themes that the code is bad; in a small number of cases the code was clearly written by a pro who cared about the quality, not just getting stuff to work.  With well written CSS and markup, a theme is generally easier to customized and maintain because the author did not create artificial limits or impose a lot of overrides to prevent the flaws in their code from coming through.

I can't find anything in there that seems to help with the checkbox so if a radio works, using it makes sense even though semantically it may be a little strange.

Cd&
0
 
Richard KortsAuthor Commented:
Cd&

I changed it this AM to use a radio button. Of course, as you point out, that is not really applicable in this case but a LOT of my customers don't even understand the difference, let alone the general public, so I think it will work.

It just seems SO STRANGE that a checkbox can't work.The EXACT same code (HTML) works on a test page with no CSS so it HAS to be the CSS; it's probably css intended for use with a plugin but is somehow effecting this. Maybe Contact Form 7, that is used in this site, I ought to see if I could find that CSS. Might apply to ALL forms.

Thanks
0
 
sno0401Commented:
Hi. I've looked at your live example and reinstated the checkbox using developer tools in Chrome. I think that the problem is in file rain1.com/new-site/wp-content/themes/bee/styles/bbpress-mod.css. It is in this file that input[type="checkbox"] is set to display: none;
Let me know if this helps.
0
 
Richard KortsAuthor Commented:
The css right around that shows styling for check boxes; do you have any idea why they would do that?

But that's clearly the answer.

Thanks!!
0
 
COBOLdinosaurCommented:
Nice job sno0401 :^)

Cd&
0
 
sno0401Commented:
I'm not sure why they would have done that. I remember reading an article about different ways to "block" spam signups a while back, and one interesting way suggested was to have a hidden checkbox. If this checkbox was checked then the company would know that the form had been completed by a bot as a normal user wouldn't have seen the checkbox. Some more interesting possible reasons are covered in this interesting article on css-tricks - https://css-tricks.com/the-checkbox-hack/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 7
  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now