Resize icon in SearchBoxButton

[Angel]

It is possible resize icon added in searchboxbutton?. I'have a bootstrap page that changes font size

<telerik:RadSearchBox ID="rsbGenero" runat="server" Skin="Bootstrap" RenderMode="Lightweight" Width="100%"
    MaxResultCount="10" DataValueField="ID" DataTextField="NOM"
    DataKeyNames="ID, NOM"
    DataSourceID="SqlDataSource"
    OnDataSourceSelect="rsbGenero_DataSourceSelect"
    OnSearch="radsearchbox_Search"
    OnButtonCommand="radserchbox_ButtonCommand"
    OnClientSearch="OnClientSearch"
    OnClientButtonCommand="OnClientButtonCommand">
    <DropDownSettings Height="300">
    </DropDownSettings>
    <Buttons>
        <telerik:SearchBoxButton CommandName="AddGenero" Position="Left" AlternateText="<%$ Resources:appGlobales,Alta %>" ImageUrl="../../imagenes/Telerik/Add-icon.png" />
    </Buttons>
</telerik:RadSearchBox>

 

I've tried it by CSS (cssclass on the button) but I can't do it. I also add another button dynamically (on search):

SearchBoxButton btnClean = new SearchBoxButton();
btnClean.ImageUrl = "~/imagenes/Telerik/close-icon.png";
btnClean.Position = SearchBoxButtonPosition.Right;
btnClean.CommandName = "Clean";
searchBox.Buttons.Add(btnClean);

 

Thank you in advance

[Rumen]

Hi Angel,

Thank you for your good question!

You can resize the button icon with the help of the following CSS:

<style>
    .RadSearchBox .rsbButton img {
        border: 1px solid red;
        width: 30px !important;
        height: 30px !important;
    }

    .RadSearchBox .rsbButton  {
        border: 1px solid green;
        width: 35px !important;
        height: 35px !important;
    }
</style>
<telerik:RadSearchBox ID="rsbGenero" runat="server" Skin="Bootstrap" RenderMode="Lightweight" ...

Here is the result:

Please let me know if you have any other questions.

Regards,
Rumen
Progress Telerik

[Angel]

@media (max-width: 1200px) {
    .RadSearchBox .rsbButton img {
        width: 17px !important;
        height: 17px !important;
    }

    .RadSearchBox .rsbButton {
        width: 18px !important;
        height: 18px !important;
    }
}

 

Thank you. Works perfect

[Rumen]

Nice job with the media query! You are welcome, Angel :)

Keep up the good work and stay healthy and well.

Regards,
Rumen
Progress Telerik