circular select button

[Nebras]

Hello, Telerik team
I want to style the select button to be circular containing an image
I used this code
  

.patients .t-select
 {
 background: url('../../Content/Images/select.jpg');
-moz-border-radius:200px;
 -webkit-border-radius:200px;
 }

the image appeared but the button still the same
why?

[Dimo]

Hello Nebras ,

The "Select" button (as most other butons in the Grid) consists of two elements. The outer element has a "t-button" CSS class and carries the button styles. The inner element has a "t-icon t-something" CSS class and carries the icon styles. Currently you are applying the border-radius on the inner element, while you should be applying them to the outer element, because it has the borders.

Note that pure-CSS rounded corners are not supported in IE.

Regards,
Dimo
the Telerik team

[Nebras]

It works , Many Thanks

[Nebras]

More question please,
attached is my button, I want to minimize its size to be 16px(ie its image size) but this is the minimum size the button can reach , how can i minimize the size to 16px

I used this styling

 

.t-button { 
-webkit-border-radius: 800px;

-moz-border-radius: 800px ;

width: 16px;

}

[Dimo]

Hi Nebras,

You should remove (or override) any padding style that is applied to the outer button element, as well as make sure that the width is applied as expected.

I strongly recommend you to use Firebug to check what styles are applied to a given element. In addition, you should be familiar with the concept of CSS specificity.

CSS Specificity Things You Should Know About

Cascading Order (W3C CSS Standard)

CSS: What Happens When a Conflict Occurs


Greetings,
Dimo
the Telerik team

[Nebras]

Thanks, Dimo
my solution :
 

.t-grid .t-grid-action
{border:none;
 min-width: 0;
 padding: 0;
 min-height:0;
height:16px;
}
.t-grid .t-grid-action .t-icon {
 background: transparent url('../../Content/Images/select.jpg');
margin: 0;
height:16px;
 border:none;
}
.t-button { border:none;
-webkit-border-radius: 500px;
-moz-border-radius: 500px ;
}

Note: circular buttons are not supported in IE