Simple Search Field is Handled Differently in Every Browser

I'm implementing a search field which consists of an input field, and an svg icon. Here's the current browser behaviour in Chrome, Firefox and IE11

Chrome – the ideal version Chrome

Firefox Firefox

IE11 (wtf) IE11

Here's a working demo of the code in question, hosted on codepen.

HTML

<div class="input-wrap">
  <input placeholder="Search…" />
  <div class="icon">
    <svg viewBox="0 0 100 100">
      <g transform="scale(4,4)">
        <path d="M2.2,9.1c0-3.8,3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9c0,3.8-3.1,6.9-6.9,6.9C5.3,16,2.2,12.9,2.2,9.1zM24,22.4l-7.7-7.7c1.3-1.6,1.9-3.6,1.9-5.6c0-5-4.1-9.1-9.1-9.1C4.1,0,0,4.1,0,9.1s4.1,9.1,9.1,9.1l0,0c2,0,4-0.7,5.6-1.9l7.7,7.7L24,22.4z"></path>
      </g>
    </svg>
  </div>
</div>

CSS

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-wrap { position: relative; }

input {
  font-size: 1rem;
  padding: 20px;
  width: 400px;
  outline: none;
  border: 1px solid black;
}

.icon {
  position: absolute;
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
}

.icon svg {
  height: 100%;
  border: 2px solid yellow;
}

The blue border represents the svg's parent, and the yellow border is the svg. Chrome sizes the svg's parent according to the svg contents. Firefox makes the svg's parent span the whole search-field. I do not know what IE is up to. I need to unify their behaviour to work like Chrome, while keeping one key characteristic of the search field: No use of fixed lengths! Everything is rem based, meaning if e.g. the root font-size increases, the entire search field should scale accordingly. I want to avoid any JS involvement.

Any suggestions are greatly appreciated!

1 answer

  • answered 2018-11-08 03:01 Ali

    Try this code, I removed absolute positioning, added flexbox and moved 400px width to the parent:

    * { box-sizing: border-box; }
    html { font-size: 15px; }
    
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .input-wrap { 
      position: relative; 
      display: flex;
      flex-direction: row;
      width: 400px;
    }
    
    input {
      font-size: 1rem;
      padding: 20px;
      outline: none;
      border: 1px solid black;
      display: flex;
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    
    .icon {
      border: 2px solid blue;
      right: 0;
      top: 0px;
      bottom: 0px;
      padding: 10px;
      display: inline-flex;
      align-items: center;
    }
    
    .icon svg {
      height: 100%;
      border: 2px solid yellow;
      height: 2rem;
    }