0

I've been trying to modify the labels/checkboxes and I can't find a solution.

The checkbox text is a bit small and I would like to edit the CSS to make it bigger.

I have tried:

form-wrapper .field-list .field.likert .option label, .form-wrapper .field-list .field.checkbox label{ font-size: 20px; }

... but it doesn't change anything.

halfer
  • 18,701
  • 13
  • 79
  • 158
nicolusse88
  • 5
  • 4
  • I have removed a link to a website that is no longer operational. This means that the question no longer features a [mcve], and it needs to be put on hold for now. Please edit the question to add a Stack Snippet or JS Fiddle, so the problem can be demonstrated. – halfer Oct 10 '18 at 08:11

1 Answers1

0

You might have a typo, you don't have a . in your first form-wrapper .

Also in general you're over-qualifying your class selectors, it's best practice to keep things simpler and avoid chaining classes/ids/elements where possible so you don't get confused about specificity and others can read your code more easily.

In my dev tools this worked with only four class selectors:

.sqs-async-form-content .form-wrapper .field-list .field .option {
  font-size: 20px;
}

That will allow you to size the labels next to the checkboxes.

For the checkboxes you have to use transform: scale(); in order to get decent browser support:

input[type=checkbox] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
}

This works in most browsers so you can probably lose the vendor prefixes depending on your level of support. Only problem is it may not look great as scaling the checkbox can make the image browsers use for the checkbox look blurry/pixelated See this related question and this post on styling form controls for other options.

Yawner
  • 43
  • 1
  • 9
  • Hi Yawner, Thanks for taking the time to help. Sadly, it doesn't change anything. Font size remains the same, no matter what browser I check the website with. – nicolusse88 Jun 16 '18 at 11:04