Customize Checkbox Document For Free

Change the check box symbol In your document, click the check box. On the Developer tab, click Properties. In the Content Control Properties dialog box, selectChange next to Checked symbol.

Lock the text and controls to prevent changes Select the list and checkboxes. Go to Developer >Group > Group. To unlock the list, select the list and choose Group > Ungroup.

Add CSS Hide the checkboxes by setting the visibility property to its ?hidden? value. Use the :checked pseudo-class, which helps to see when the checkbox is checked. Style the label with the width, height, background, margin, and border-radius properties.

Example /* Customize the label (the container) */ ... /* Hide the browser's default checkbox */ ... /* Create a custom checkbox */ ... /* On mouse-over, add a grey background color */ ... /* When the checkbox is checked, add a blue background */ ... /* Create the checkmark/indicator (hidden when not checked) */

It is possible to style a checkbox using Pseudo Elements like :before, :after, hover and :checked. To style the checkbox the user first needs to hide the default checkbox which can be done by setting the value of the visibility property to hidden. Example 1: Consider the example where HTML checkbox is styled using CSS.

Insert a check box on a form template that is based on an existing data source On the form template, place the cursor where you want to insert the control. If the Controls task pane is not visible, click More Controls on the Insert menu, or press ALT+I, C. Under Insert controls, click Check Box.

To change size, color, or border style of the check box, select the Use a style to format text typed into the empty control box, and then click New Style. Under Formatting, select a font size for the check box. In the Color list, select a color. To select a different border, select Format > Border.