Custom Css on Checkbox Column in SF Data Grid

[Pavel]

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowSelection="true" AllowPaging="true">
                <GridSelectionSettings CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>
                <GridColumns>
                    <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  IsPrimaryKey="true" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) Format="C2" TextAlign="TextAlign.Right"  Width="200"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShippedDate) HeaderText="Shipped Date" Format="d" TextAlign="TextAlign.Right" Type="ColumnType.Date" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

How do I  access the CSS on the Checkbox column to make the checkbox size larger and to change the selected color from blue to transparent?



[Renjith Singh Rajendran]

Hi Pavel,

Greetings from Syncfusion support.

We suggest you to override the default checkbox styles as like the below codes to achieve this requirement. Please use as like the style below,

 

<style>

    .e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons{

        width:25px;

        height:25px;

    }

    .e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons.e-check{

        background-color: transparent;

        border-color: transparent;

        color: red;

    }

</style>

 

Please get back to us if you need further assistance.

Regards,

Renjith R