Try Now
More in this section

Forums / Designing & Styling / How to style search box

How to style search box

2 posts, 1 answered
  1. Dev
    Dev avatar
    18 posts
    18 Jan 2013
    18 Jan 2013
    Link to this post


    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.


  2. Arno
    Arno avatar
    249 posts
    08 Sep 2010
    18 Jan 2013
    Link to this post
    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;
2 posts, 1 answered