Hi Muriel,

In your code, I found you have added space between 30 & px. 

height: 30 px

That is invalid.
Try removing space and it will work. You just need to set height. 



For checkbox, you can also apply Scale.

You can add following in your existing CSS to set resize your checkbox.
transform: scale(2.0);

Following is an example: 

1) Checkbox without any CSS applied : 

2) Same Checkbox with Scale property applied : 

CSS for above example:
--------------------------------------------------
html input[type="CheckBox"] {
    transform: scale(2.0);
}


Let me know if you have any more doubts in this.

Happy Designing :)

A checkbox is a browser element, the browser generates these elements, increasing it's height will only increase the height surrounding the checkbox, but as Palak said, you can use transform: scale(decimal); to resize it. However if wish to create a fully custom checkbox, you can create a div and hide the checkbox, then apply styling to the div.

An example from w3schools: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

I think this example will help you achieve what you are looking for.

Correct @Joey. That's the most common and convenient way.

@Muriel, If you only apply height and width to checkbox, then it will look like below.
Again you need to align either checkbox or text to be in one line.

So if you wish to apply only CSS, just add width & Scale to separate text and checkbox with each other.
It will be always vertically center aligned and will not cause any issues in designing.

Regards,