Skip Navigation

[Closed] Checkbox Styling

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 7.23 hours from now. Thank you for your understanding.

This topic contains 6 replies, has 2 voices.

Last updated by Luo Yang 1 year, 9 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1277983
Screen Shot 2019-06-26 at 9.02.46 PM.png

Tell us what you are trying to do? I am trying to style a checkbox do that the text is aligned with the checkbox rather then skewed up.

Is there any documentation that you are following? I can't find anything on the Toolset site

Is there a similar example that we can see?

What is the link to your site?

hidden link

#1278023

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

checkbox.JPG

Hello,

I have tried the URL you mentioned above, but I see different from your screenshot, see screenshot checkbox.JPG

Is this problem resolved? Please let me know if you need more assistance for it. thanks

#1278033

Hi, what browser are you in? In Safari and Chrome they are misaligned, like my first screenshot. Here is the link again: hidden link

In browsers, we want the checkbox on the left, and then text on the right, they should be aligned on a grid (so they have the same typographic baseline). Right now the text is too high.

#1278035
Screen Shot 2019-06-26 at 11.14.16 PM.png
Screen Shot 2019-06-26 at 11.14.05 PM.png

Alignment should be something like this.

#1278101

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

checkbox1.JPG

I am using Chrome browser, I have test again the URL you mentioned above, but get the same result as the screenshot as I mentioned above.

I have tested it in my localhost, it is possible to style the checkbox field as your screenshot, for example:

input[data-wpt-name="wpcf-privacy-policy"]{
position: absolute;
    left: 0px;
    top: -12px;
    width: 10px;
}

See screenshhot checkbox1.JPG

#1278765

Thank you, I was able to work with that code, but it definitely does not render the same way as it does on your screen. I tested different devices and colleagues are testing on various devices as well. It's frustrating that I can't replicate your view.

#1279213

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Since it is a custom CSS codes problem, if you need more assistance for it, please provide a test site with the same problem, I can setup a demo for you, thanks

The topic ‘[Closed] Checkbox Styling’ is closed to new replies.