How to style search box

Posted by Community Admin on 05-Aug-2018 16:38

How to style search box

All Replies

Posted by Community Admin on 18-Jan-2013 00:00

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,

Posted by Community Admin on 18-Jan-2013 00:00

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;
    

This thread is closed