Column Checkbox css affecting other parts

Question

Hello, I have a column that is a checkbox.

I used this css to change the appearance of the checkbox.

.e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons{
   width:22px;
   height:22px;
   border-color: rgba(0, 0, 0, 0.7);
   border-width: 2px;
}

.e-grid .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.75);
    border-width: 2px;
    color: #000;
}

.e-grid .e-checkbox-wrapper .e-check {
    font-size: 10px;
    padding-top: 2px;
}
                  
.e-grid .e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: transparent;
    color: #000;
}

This works to style the column but it has unwanted affect of styling all other checkboxes on the page (for example the filter dropdown)

How do I apply the checkbox css just to the One column.

I have tried adding a class attribute but it doesn't seem to work

<GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80" IsFrozen="true" Freeze="FreezeDirection.Left" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "grid-check" }})"></GridColumn>

Renjith Singh Rajendran · Accepted Answer

Hi Pavel,We suggest you to ensure not to leave space between e-rowcell and grid-check classes. Please refer and use as like the below suggestion. And also for displaying checkbox in center of the cell, we suggest you to use the TextAlign property of Grid instead of using the above style. Please add the below property to display the checkboxes at the center of cell. Please get back to us if you need further assistance.Regards,Renjith R

Renjith Singh Rajendran · Answer

Hi Pavel,Greetings from Syncfusion support.We suggest you to add style based on the CustomAttributes which you have provided in GridColumn. When using CustomAttributes for a GridColumn, it will add the class(grid-check) to each of the td/td elements of that particular column. So now you can traverse the DOM based on this class. So now, only the corresponding column’s td/th elements will only be affected based on the style applied. Kindly try the above suggestion from your side. If you are still facing difficulties, then kindly share with us the details along with details about filter dropdown(Are you referring to Excel filter?).Regards,Renjith R

Pavel · Answer

Hello, I tested your solution however there are two styles still not working correctly

/*style to make the checkbox container larger*/
.e-grid .e-rowcell .grid-check .e-checkbox-wrapper .e-frame.e-icons{
width:22px;
height:22px;
border-color: rgba(0, 0, 0, 0.7);
border-width: 2px;
}

/*style to center checkbox in column*/
.e-grid .e-rowcell .grid-check .e-checkbox-wrapper{
padding: 5px 5px 5px 15px;
margin-left:  15px;
}

If i remove the .grid-check those two style work but affect other parts of the page.