Drupal Technical

[Drupal Theming] How to prevent search text from overlapping Drupal search block form in IE?

Dhanyamol.kv | | 2 min read

One of our Drupal clients asked us to customize the search box in one of their Drupal themes and bring in rounded corners and a search icon. However the solution we came up with was causing the search text to overlap the search block from in IE. If you are facing the same issue in your Drupal site and would like to know how to prevent search text from overlapping Drupal search block form in IE then read on to find out the solution.

The problem in detail

By default the Drupal has a search box with square corners. The usual method to them the search block form is to create a background image with rounded corners and then align the search icon inside the text area using CSS positioning. This method works fine in all browsers except IE. If the search text length is greater than the background image in IE then the text will overflow the background image even after setting the proper padding.

The Solution

We can fix this issue by modifiying the CSS to add a background image to the search form and style the input text and button properly using the CSS shown below. 

// Add background image to search form. 
// Here #search-block-form is the id of the search form 
.region-search #search-block-form { 
    background: url("../images/Search_bg.png") no-repeat scroll left top transparent; 
    height: 25px;
    margin-top: 5px;
    padding-top: 2px;
    position: relative;
    width: 245px;
}
// Style the search form input text box
.region-search input[type="text"] {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    height: 19px;
    margin: 0 30px 0 10px;
    outline: medium none;
    width: 205px;
}
// Style search form input button
button.region-search, .region-search input[type="image"] {
    border: medium none;
    cursor: pointer;
    float: none;
    height: 18px;
    left: 215px;
    padding: 3px;
    position: absolute;
    top: 1px;
    width: 20px;
}

Hope that was of helpful. If you have any doubts regarding Drupal theming then use the comment form below.

 

 

Related Topics