Support » Plugin: Contact Form 7 » The cross is not visible in the checkbox (Contact Form 7)

  • Resolved Nico

    (@nicowp2019)


    Good morning,
    When I mark the checkbox, the cross is not visible. You only see a small square with fine border. What could be the cause of this problem?

    Thank you!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website?

    Thread Starter Nico

    (@nicowp2019)

    Yes, of course. The website is this:
    https://www.visitselva.net/comercos/#registrar-comerc

    You can see the form with some checkboxes.
    Data to add: the cross/check mark symbol is visible only in the Internet Explorer browser. In Chrome or Firefox Mozilla is not visible.

    Thank you

    Nico, I think there’s something wrong with your CSS. Did you try to make alternative marks?..
    In your style.css file is written:
    input[type=”checkbox”] {-webkit-appearance: none;} and some css is written for input[type=checkbox]:checked:before {content: ‘\f00c’; } which does not works…
    I think, \f00c is some icon from Font Awesome which was not loaded correctly..
    So.. check up your CSS!

    Thread Starter Nico

    (@nicowp2019)

    Good morning,

    Sorry, you say I put the CSS like this?

    div.wpcf7 input[type=checkbox]:checked:before {
    content: ‘\f00c’;
    }

    Or like this?

    div.wpcf7 input[type=”checkbox”] {
    -webkit-appearance: checkbox;
    }

    It doesn’t work in either of those two ways. Am I writing the code correctly?

    Thank you

    Hi!
    input[type=”checkbox”] {-webkit-appearance: checkbox;} should work
    Check it with Ctrl+Shift+I
    https://psv4.userapi.com/c856424/u12402406/docs/d8/1fac683bd19a/2019-11-08_11-49-51.png

    Thread Starter Nico

    (@nicowp2019)

    Hi!

    Now it works, but there is a strange symbol behind the tick. I leave the page for you to see

    https://www.visitselva.net/comercos/#registrar-comerc

    Thank you!

    Yes, I see.
    I think you should delete this:
    input[type=checkbox]:checked:before {
    content: ‘\f00c’;
    }
    (The whole rule, not only one string)

    I think, the idea was to hide the original check mark and add alternative check mark with :checked:before CSS. This is commomn procedure if you want to add some own design to standart forms… But it is not working correctly.. So you turned back the original check mark, now you should delete alternative mark.

    Thread Starter Nico

    (@nicowp2019)

    Hi!

    I delete this:
    input[type=checkbox]:checked:before {
    content: ‘\f00c’;
    }

    but the checkbox’s tick continues to display incorrectly. The theme I use is OceanWP and I think an update has caused this. Could be?

    I have created forms with 3 different plugins: Contact Form 7, WPForms and Elementor. And the checkbox tick display incorrectly in the three plugins. This has to do with the version of Font Awesome?

    Thank you

    Yes, I think the problem is with the version of Font Awesome

    Thread Starter Nico

    (@nicowp2019)

    Which Font Awesome version is ContactForm7 compatible with?

    Unfortunately I have the same problem since I updated, I have the “small square with fine border”…

    @valerie18 – see I have the same problem! Can I just reply to someone else’s post with “Me too”?.

    If you are willing to create a new question, which details your issues, somebody will likely be able to help you there.

    Thread Starter Nico

    (@nicowp2019)

    Hi!

    If you are using the OceanWP theme and with the OceanExtra plugin, it seems that the last update of one of these two has caused this problem. Temporary solution that (@harrisdesigned) has given me in another post:

    input[type=checkbox]:checked:before {
        color: #C16E2A !important;
        content: '\f058' !important;
    	padding-top:1px;
    }
    
    input[type="checkbox"] {
    	height:18px;
    	width:18px
    }

    Or, if you want the content of the check with the symbol ‘X’:

    input[type=checkbox]:checked:before {
        color: #C16E2A !important;
        content: 'X' !important;
    	padding-top:1px;
    }
    
    input[type="checkbox"] {
    	height:18px;
    	width:18px
    }

    Other says: It is caused by the update of Ocean Extra v1.5.17 plugin. There it was changed from FontAwesome 4.7 to 5.0.
    So this is the right forum:
    https://wordpress.org/support/plugin/ocean-extra/

    And they also say: For now, roll back to OceanWP v1.7.1 and Ocean Extra v1.5.16 to temporary fix this point.

    In my case, even if it is a temporary solution, I mark this topic as resolved!

    Thanks for this post. Same issue with OceanWP.

    also work for me.
    oceanwp
    elementor
    contact form 7

    thanks

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘The cross is not visible in the checkbox (Contact Form 7)’ is closed to new replies.