Change the size of ASP:CheckBox through CSS

We can use an html control checkbox  along with the style to change the size of a html CheckBox’s size.

We can alse change the size of ASP:CheckBox’s size through a style definition. Since the ASP:CheckBox will be wrapped inside a SPAN tag when it is emitted to HTNL, we need to define the style to this span’ input element:

(active is a boolean column)

<style type="text/css">.mycheckBig input {width:25px; height:25px;}

.mycheckSmall input {width:10px; height:10px;}


 <asp:TemplateField HeaderText="activeSmall" >                 
<ItemTemplate><asp:CheckBox ID="CheckBoxSmall" runat="server"  Checked=<%# Convert.ToBoolean(Eval("active")) %> AutoPostBack="False" CssClass="mycheckSmall"  />
<asp:TemplateField HeaderText="activeBig" >
<ItemTemplate> <asp:CheckBox ID="CheckBoxBig" runat="server"  Checked=<%# Convert.ToBoolean(Eval("active")) %> AutoPostBack="False" CssClass="mycheckBig"  />


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s