How to style search box - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

How to style search box

  • How to style search box
  • Hi,

    Can you please guide me on how to change the style of search widget. I was unable to find the search widget under Design->widget templates. All I want to do is hide the search button and apply some styles to the searchbox. I am new to sitefinity, so I was wondering if there is a place where I can go to view the markup of the widget and change its style (I dont have thunder installed) or even if there is a way where I write new styles to apply on top of the widget.

    Thanks,

  • Hi Prashant,

    I don't think you can set a custom template for the search widget or anything like that. The search widget only renders a div containing two input tags. You can see that by right clicking on it in Google Chrome and choosing Inspect Element. I styled it by wrapping the widget in a <div class="search">. That allows me to set styles like this:

    .search input:nth-of-type(2)
        height: 11px;
        background: url('search.png') no-repeat;
        border: none;
        position: absolute;
        margin: 8px 0 0 -16px;
     
        .search input:nth-of-type(2):hover
            cursor: pointer;