Styling CheckBox

2,048 views
Skip to first unread message

Tim K

unread,
Dec 23, 2009, 11:15:26 AM12/23/09
to Google Web Toolkit
I want to change the size of a com.google.gwt.user.client.ui.CheckBox
so that it grows/shrinks. I am using a Chrome Browser. It zooms in
and out with Ctrl-Plus and Ctrl-Minus.

This entry in my css file had no effect.
.gwt-CheckBox {
width: 1em;
height: 1em;
padding: 0;
margin: 0;
}

Chrome's inspector displays this HTML.
<span class="gwt-CheckBox">
<input type = "checkbox" ...

Should class="gwt-CheckBox" be on the input element?
Can a java method add a class to the input element?

I have a css work around that is working for me, but it will affect
all checkboxes.
input[type="checkbox"]{
width: 1em;
height: 1em;
padding: 0;
margin: 0;


}
Thanks,
Tim K.

Thomas Broyer

unread,
Dec 23, 2009, 10:08:22 PM12/23/09
to Google Web Toolkit

On 23 déc, 17:15, Tim K <timk...@gmail.com> wrote:
> I want to change the size of a com.google.gwt.user.client.ui.CheckBox
> so that it grows/shrinks.  I am using a Chrome Browser. It zooms in
> and out with Ctrl-Plus and Ctrl-Minus.
>
> This entry in my css file had no effect.
> .gwt-CheckBox {
>   width: 1em;
>   height: 1em;
>   padding: 0;
>   margin: 0;
>
> }
>
> Chrome's inspector displays this HTML.
> <span class="gwt-CheckBox">
>    <input type = "checkbox" ...
>
> Should class="gwt-CheckBox" be on the input element?

No. A CheckBox widget is composed of a checkbox and label, wrapped in
a <span>

> Can a java method add a class to the input element?

You can use a SimpleCheckBox instead of a CheckBox, to just have the
<input type=checkbox>.

But you can also just tweak your CSS to target the input child of
the .gwt-CheckBox:

.gwt-CheckBox input {

Reply all
Reply to author
Forward
0 new messages