Using a CSS sprite image in a search box (1 post)

  1. Christopher Roberts
    Posted 3 years ago #

    Hi everyone,

    I am testing a search box on my test site: http://www.technologybloggers.co.uk/test/ and am trying to use the following CSS sprite http://www.technologybloggers.co.uk/images/search.png to create a search icon that changes colour when the box is clicked on.

    I have done it, but I can't seem to align it inwards. I want it to be in the middle (about 6.5px down) of the box and about 6.5px in from the left side.

    The form code (HTML) is:

    <div class="search-box"><div class="widget-wrapper widget-wrapper-single single widget-wrapper-1">
    <div class="widget widget-1 widget-single clearfix widget_search" id="search-5"><form method="get" class="search-form" action="<?php bloginfo( 'url' ); ?>">
    	<input type="text" value="Search" name="s" class="search-text-box" onfocus="if(this.value == 'Search') this.value = '';" onblur="if(this.value == '') this.value = 'Search';" />

    The style code (CSS) for the search box is:

    .widget_search #s{width:60%;}
    .widget_search label{display:none;}
    .widget_search .search-text-box {
        -moz-transition: 400ms width ease;
        -webkit-transition-duration: 400ms;
        -webkit-transition-property: width;
        -webkit-transition-timing-function: ease;
        -o-transition-duration: 400ms;
        -o-transition-property: width;
        -o-transition-timing-function: ease;
        background-image: url('/images/search.png');
        background-repeat: no-repeat;
        background-position: -13px 0;
        font-size: 1.2em;
        color: #7c7b7c;
        height: 30px;
        padding: 0 5px 0 18px !important;
        width: 120px;
        background-color: #333333;
        border: 1px solid #cccccc;
        border-radius: 4px 4px 4px 4px;
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
    .widget_search .search-text-box:focus {
        background-image: url('/images/search.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        border: 1px solid #777777;
        box-shadow: 0 0 3px 1px #DEDEDE;
        font-size: 1.2em;
        color: #333333;
        width: 235px;
        background-color: #FFFFFF;
    .search-box {float:left;margin:3px 0 0 7px;}

    All help appreciated!

    Thanks :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

  • RSS feed for this topic
  • Started 3 years ago by Christopher Roberts
  • This topic is not resolved
  • WordPress version: 3.5.1