CSS question

  • willpower1

    (@willpower1)


    9 years ago

    Hi all.
    I am trying to style the checkboxes on my site with the code I found here.
    https://codepen.io/BandarRaffah/pen/ibwje

    But when I add this css to my themes custom CSS area it has no effect.
    Can anyone tell me how to fix this please?

    /* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
	width: 50px;	height: 25px;
}

/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
	background-color: #00e359;
	border: 1px solid rgba(0, 162, 63,1);
	box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}
    • This topic was modified 9 years ago by willpower1.
    • This topic was modified 9 years ago by willpower1.
    • This topic was modified 9 years ago by willpower1.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Jack

    (@jdabber)

    9 years ago

    Are you modifying the code from copepen so that the selectors match the ones in your theme? That css is using very specific class names.

    • This reply was modified 9 years ago by Jack.
    • This reply was modified 9 years ago by Jack.
    Thread Starter willpower1

    (@willpower1)

    9 years ago

    Sorry I am not. I’m not a coder. Can you tell me how I do that please Jack?

    catacaustic

    (@catacaustic)

    9 years ago

    Without seeing the page that you’re trying to use that on there’s no way possible for anyone here to say what the right or wrong way is. The code that you’ve posted is fine and will work – but unless the CSS selectors match the HTML structure of your site, it won’t do anything.

    Thread Starter willpower1

    (@willpower1)

    9 years ago

    Sorry.
    Here’s the page on my site with the checkboxes I want to change

    http://www.ausdigitalmedia.com/digital-signage-catalogue/

    catacaustic

    (@catacaustic)

    9 years ago

    On your site, this is the rule that specifies the CSS for those checkboxes:

    .with_frm_style .frm_radio input[type="radio"], .with_frm_style .frm_checkbox input[type="checkbox"] {
	display: inline-block;
	margin-right: 5px;
	width: auto;
	border: none;
	vertical-align: baseline;
}

    That’s part of your Formidable Pro plugin, so you can copy that selector to your themes stylesheet and add the CSS styles that you mentioned above.

    .with_frm_style .frm_checkbox input[type="checkbox"] {
    width: 50px;
    height: 25px;
}
.with_frm_style .frm_checkbox input[type="checkbox"]:checked {
    background-color: #00e359;
    border: 1px solid rgba(0, 162, 63,1);
    box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}

    Now, to note that from the CodePen snippet before, that’s for IOS, so you most likely won’t see any changes on a normal desktop. Most browsers have builtin defaults for field inputs like that, and don’t apply it when rules are specified like that.

    Thread Starter willpower1

    (@willpower1)

    9 years ago

    Thanks for the reply.
    I tried that code with no success. both on my iPhone and the desktop computer.
    Then I tried this code

    .with_frm_style .frm_checkbox input[type="checkbox"]:checked {
    background-color: #00e359;
    border: 1px solid rgba(0, 162, 63,1);
    box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
     width: 50px;
    height: 25px;
}

    Still no success:(

    • This reply was modified 9 years ago by willpower1.
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘CSS question’ is closed to new replies.