GridClientSelectColumn styling

[Van]

 

We cannot get the client select column checkbox to style according to our needs on Chrome.  On IE 11, Edge and Firefox the style of the checkbox looks the way we want it.  However on Chrome the style shows up differently.   See attachment.  We are using a custom skin,  and have tried to force the checkbox style to look like IE 11/Edge/Chrome, however none of our attempts has corrected the styling.  We don't want to change the styles in our custom button skin (created on Telerik site).  Is there something special about the "GridClientSelectColumn" that makes is NOT like  a standard checkbox control for styling??

 

 

 

[Doncho]

Hi Van,

In the HTML structure, GridClientSelectColumn renders <input type="checkbox"> elements in the table cells (<td> elements). Unfortunately the <input type="checkbox"> HTML element cannot be styled.

One option is to hide it by setting its opacity to 0 and place your own custom checkbox over, see How TO - Custom Checkbox article. Here is an article that I found that may also help: How to style checkbox without using any CSS framework.

To apply styles to the checkbox in the GridClientSelectColumn you can use the ItemCssClass property to assign a custom class to the rendered <td> element

Sample

<telerik:GridClientSelectColumn ItemStyle-CssClass="myClass"></telerik:GridClientSelectColumn>

CSS

.myClass input{
    opacity:0;
}

I hope this will help.

Kind regards,
Doncho
Progress Telerik