Title: CSS question
Last modified: May 30, 2017

---

# CSS question

 *  [willpower1](https://wordpress.org/support/users/willpower1/)
 * (@willpower1)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/)
 * Hi all.
    I am trying to style the checkboxes on my site with the code I found
   here. [https://codepen.io/BandarRaffah/pen/ibwje](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](https://wordpress.org/support/users/willpower1/).
    -  This topic was modified 9 years ago by [willpower1](https://wordpress.org/support/users/willpower1/).
    -  This topic was modified 9 years ago by [willpower1](https://wordpress.org/support/users/willpower1/).

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

 *  [Jack](https://wordpress.org/support/users/jdabber/)
 * (@jdabber)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178226)
 * 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](https://wordpress.org/support/users/jdabber/).
    -  This reply was modified 9 years ago by [Jack](https://wordpress.org/support/users/jdabber/).
 *  Thread Starter [willpower1](https://wordpress.org/support/users/willpower1/)
 * (@willpower1)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178238)
 * Sorry I am not. I’m not a coder. Can you tell me how I do that please Jack?
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178412)
 * 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](https://wordpress.org/support/users/willpower1/)
 * (@willpower1)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178500)
 * Sorry.
    Here’s the page on my site with the checkboxes I want to change
 * [http://www.ausdigitalmedia.com/digital-signage-catalogue/](http://www.ausdigitalmedia.com/digital-signage-catalogue/)
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178534)
 * 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](https://wordpress.org/support/users/willpower1/)
 * (@willpower1)
 * [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178563)
 * 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](https://wordpress.org/support/users/willpower1/).

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

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [willpower1](https://wordpress.org/support/users/willpower1/)
 * Last activity: [9 years ago](https://wordpress.org/support/topic/css-question-32/#post-9178563)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics