Menu icon Foundation
Pre/Postfix color

Hi there

I am struggling to change the color of my prefix box and postfix button? See below my HTML & SASS

span.prefix{
  background-color:$primary-color; 
   &:hover {
        background-color:none;
        color:white;
        font-weight:bold;
        }
}

.postfix button{
  color:$primary-color; 
   &:hover {
        background-color:none;
        color:white;
        font-weight:bold;
        }
}
            

 <div class="row">
        <div class="column large-12 medium-12 small-12">
            <h2><center>Imagine the best <b>grooming</b> services at your finger tips</h2><br><br>
         <div class="row collapse custom">
         <div class="large-1 end columns">
            <span class="prefix"><i class="fi-marker" style="color:white; font-size:30px;"></i></span></input>
        </div>
          <div class="large-4 columns">
            <input type="text" placeholder="Search by location" />
          </div>
           <div class="large-1 end columns">  
            <span class="prefix"><i class="fi-shopping-bag" style="color:white; font-size:30px;"></i></span></input>
        </div>
         <div class="large-4 columns">
          <input type="text" placeholder="Search by grooming service" />
        
        </div>  
           <div class="large-2 end columns">
            <a href="#"><span class="button postfix"><i class="fi-magnifying-glass" style="color:white; font-size:30px;"></i></span></input></a>
            </div>
        </div>        

prefixpostfix

Hi there

I am struggling to change the color of my prefix box and postfix button? See below my HTML & SASS

span.prefix{
  background-color:$primary-color; 
   &:hover {
        background-color:none;
        color:white;
        font-weight:bold;
        }
}

.postfix button{
  color:$primary-color; 
   &:hover {
        background-color:none;
        color:white;
        font-weight:bold;
        }
}
            

 <div class="row">
        <div class="column large-12 medium-12 small-12">
            <h2><center>Imagine the best <b>grooming</b> services at your finger tips</h2><br><br>
         <div class="row collapse custom">
         <div class="large-1 end columns">
            <span class="prefix"><i class="fi-marker" style="color:white; font-size:30px;"></i></span></input>
        </div>
          <div class="large-4 columns">
            <input type="text" placeholder="Search by location" />
          </div>
           <div class="large-1 end columns">  
            <span class="prefix"><i class="fi-shopping-bag" style="color:white; font-size:30px;"></i></span></input>
        </div>
         <div class="large-4 columns">
          <input type="text" placeholder="Search by grooming service" />
        
        </div>  
           <div class="large-2 end columns">
            <a href="#"><span class="button postfix"><i class="fi-magnifying-glass" style="color:white; font-size:30px;"></i></span></input></a>
            </div>
        </div>        
Rafi Benkual almost 4 years ago

Hi Anina,
Are you trying to change the prefix background as well even though it's not a button? Changing the color is simple, but did you want to change the color on hover as well?

It seems like the color change is working here: http://codepen.io/rafibomb/pen/BjRmZV?editors=110

Does that help?