Style checkbox with different border

  • Resolved puntod

    (@puntod)


    2 years, 4 months ago

    Hello, I am trying to add a black 2px solid border to the checkboxes but seems an impossible task.

    I tried with the following code, the width and height does change but the border remains same. 

    div.wpforms-container-full .wpforms-form .select input[type=checkbox], 
div.wpforms-container-full .wpforms-form .select input[type=radio] {
    width: 15px;
    height: 15px;
    border: 2px solid #000000;
}

    As I was searching for a solution came across the following code which I added but still does not work:

    .wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey @puntod — could you please share the form URL where you are facing this issue?

    Thread Starter puntod

    (@puntod)

    This is the link:

    Form with Checkboxes

    Thanks!

    Hi @puntod — for the most part, be styled with CSS in the way that most other parts of a form can be altered with CSS. This is because Checkbox/ Dropdown fields are generated by the specific operating system you’re using when viewing the form (and this is also why Dropdowns will look so different on Windows vs Mac, etc). On top of that, browsers insert certain specific appearances to these types of fields as well.

    While some sites (and even some WordPress themes) do get around this, they do so by adding fairly extensive JavaScript — and at times this can lead to functionality issues. This (reliability concerns) is why we don’t currently implement a similar option. I agree it would be great to offer from a stylistic standpoint, though, and it’s on our feature request list for our team to consider further in the future.

    I apologize, as this is likely not a very satisfying answer, but hopefully these details are helpful.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Style checkbox with different border’ is closed to new replies.