applying css onto searchbox

[Duy]

Hi,

 I could not find a way to apply css on dropdown and search button.

 May you guide what css key to apply certain item in dropdown and search button.

 Cheers,

 Duy

[Ivan Danchev]

Hello Duy,

The selectors you can use to apply styles to different elements of the SearchBox control are listed in the Skin Selectors documentation article. For example, the following two CSS rules set the background color of the SearchBox items on hover and change the default image used as background for the Search button:

.RadSearchBox .rsbListItem:hover {
    background-color: lightblue;
}

.RadSearchBox .rsbButtonSearch .rsbIcon {
    background-image: url('images/myImage.png');
}

Regards,
Ivan Danchev
Telerik

[Duy]

Hi,

 I am trying to apply css to spot in red circle.  Can I arrange dropdown position out of search box?

  Here is my css.

.RadSearchBox .rsbInput {
font-size: 16px;
padding:12px 0 12px 0;
vertical-align:middle;
height:60px;
width:120px;
}
.RadSearchBox .rsbInner {
font-size: 16px;
padding:3px 0 3px 0;
vertical-align:middle;
}
html .RadSearchBox .rsbButtonSearch {
height: 60px;
width:60px;
}
.RadSearchBox:hover .rsbButtonSearch
{
background-color: #3E3E3E;
}
html .RadSearchBox .rsbButtonSearch:hover {
background-color: #3E3E3E;
}
.rsbIcon{
background-image:green;
background-position:0 !important;
}.rsbPopup{
background-color:Black;
}
.rsbPopup .rsbList
{
font-size : 16px !important;
background-color:Black;
}
html .RadSearchBox .rsbList
{
background-color:Gray;
}
html .RadSearchBox .rsbListItem:hover {
background-color: green;
}
html .RadSearchBox .rsbListItem {
background-color: black;
}

 Regards,

 

Duy

[Ivan Danchev]

Hello Duy,

Even though not recommended, as the SearchContext's dropdown is designed to be shown in SearchBox next to the input, you can re-position the dropdown to the left with the following CSS rule:

.rsbSearchContext {
    position: relative;
    left: -160px;
}

​
Regards,
Ivan Danchev
Telerik