Web Analytics Made Easy -
StatCounter Help keeping image there. - CodingForum

Announcement

Collapse
No announcement yet.

Help keeping image there.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help keeping image there.

    I got a search bar on my site and has the little magnifier on the search bar and a place holder. When you go to do a search the placeholder stays which is fine but the little magnifier leaves and i want it to stay.

    Code:
    <form class="form-wrapper cf" method="get" action="http://www.google.com/search?q=<?php echo $_REQUEST['q']?>">
    <input type="text" id="search-box" name="q" autocomplete="off" placeholder="Search Google.....">
    <button type="submit">Search</button>
    </form>
    Code:
    /****************************************************************************************************************************************** searchbar*/
    .cf:before, .cf:after{
    content:"";
    display:table;
    }
        
    .cf:after{
    clear:both;
    }
    
    .cf{
    zoom:1;
    }
    
    .form-wrapper input {
    background:white url(/images/search-icon.png) left center no-repeat fixed;
    background-position: 10px;
    position: fixed;
    background-size:27px 27px;
    border: 0;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    color:#000000;
    float: left;    
    font-size:22px;
    height: 30px;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    padding: 10px 5px;
    text-indent:50px;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    width: 496px;
    }
    
    .form-wrapper input:focus {
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    outline: 0;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }
        
    .form-wrapper input::-webkit-input-placeholder {
    color: #999;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
    }
        
    .form-wrapper input:-moz-placeholder {
    color: #999;
    font-family:Arial, Helvetica, sans-serif;	
    font-weight: normal;
    }
        
    .form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
    }    
        
    .form-wrapper button {
    background: #204a84;
    border: 0;
    border-radius: 0 0px 0px 0; 
    color: #fff;
    cursor: pointer;
    font: bold 18px/40px Arial, Helvetica, sans-serif;	
    float: right;
    height: 50px;
    margin-right:0px;
    -moz-border-radius: 0 0px 0px 0;
    overflow: visible;
    position: relative;
    padding: 0;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    text-transform: uppercase;
    -webkit-border-radius: 0 0px 0px 0; 
    width: 110px;    
    }   
          
    .form-wrapper button:hover{		
    background: #00b22d;
    }	
          
    .form-wrapper button:active,
    .form-wrapper button:focus{   
    background: #00b22d;    
    }
        
    .form-wrapper button:before {
    border-color: transparent #204a84 transparent;
    border-style: solid solid solid none;
    border-width: 8px 8px 8px 0;
    content: '';
    left: -6px;
    position: absolute;
    top: 17px;
    }
       
    .form-wrapper button:hover:before{
    border-right-color: #00b22d;
    }
        
    .form-wrapper button:focus:before{
    border-right-color: #00b22d;
    }    
        
    .form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
    }
    
    .right {
    float: right;
    }
    Thanks

  • #2
    Code:
    form-wrapper input {
    background:white url(/images/search-icon.png) left center no-repeat fixed;
    ...
    
    .form-wrapper input:focus {
    background: #fff;
    You are literally telling the CSS to remove the image on :focus. Don't do that.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

    Comment

    Working...
    X