Search code examples
htmlcssmozilla

css icon position not work on mozilla firefox

icon position work's fine on chrome. but on mozzilla, the icon move from the position. the question is, how to implement this code to mozilla firefox? is there a difference for chrome or mozzilla? The css code is below

.searchbar-1{
          
          float: right;
          width: 300px;
          vertical-align: middle;
          white-space: nowrap;
          position: relative;
          margin-right: 120px;
          margin-top: -4px;
        }
        .searchbar-1 input#search{
          width: 300px;
          height: 40px;
          background: #E6E7E9;
          border: none;
          font-size: 10pt;
          font-style: italic;
          float: left;
          color: #63717f;
          padding-left: 45px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
        }
        
        .searchbar-1 input#search::-webkit-input-placeholder {
           color: #65737e;
        }
         
        
         
        .searchbar-1 input#search:-ms-input-placeholder {  
           color: #65737e;  
        }
        
        .searchbar-1 .icon{
          position: absolute;
          top: 0%;
          margin-left: 12px;
          margin-top: 9px;
          z-index: 1;
          color: black;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="searchbar-1">
                <span class="icon"><i class="material-icons" (click)="applyFilterCustom(search)">search</i></span>
                <input type="text" [(ngModel)]="search" id="search" placeholder="Where would you like to go next?" name="search" (keyup.enter)="applyFilterCustom(search)" />
    </div>

Solution

  • Whenever you use position: absolute; you must have to define position. in your case you have defined the top position but not left or right so based on your requirement you have to define any of them. which will resolve your issue for browser.