applying css onto searchbox

4 posts, 0 answers
  1. Duy
    Duy  avatar
    68 posts
    Member since:
    Apr 2009

    Posted 21 Dec 2015 Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 23 Dec 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Duy
    Duy  avatar
    68 posts
    Member since:
    Apr 2009

    Posted 23 Dec 2015 in reply to Ivan Danchev Link to this post

    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

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 25 Dec 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top