Jednoduché Search Field zpracovány jinak prakticky v každém prohlížeči

hlasů
0

Já jsem se provádí vyhledávací pole, které se skládá ze vstupního pole a ikonu SVG. Zde je aktuální chování prohlížeče v Chrome, Firefox a IE11

Chrome - ideální verze chróm

Firefox Firefox

IE11 (WTF) IE11

Zde je pracovní demo kód v otázce hostuje 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;
}

Modrý rámeček představuje rodiče SVG je, a žlutý rámeček je SVG. Chrome velikosti rodiče SVG je v souladu s obsahem SVG. Firefox je rodič SVG je pokrýval celý vyhledávací pole. Nevím, co IE je až. Musím sjednotit své chování pracovat jako Chrome , a zároveň zachovat jednu klíčovou charakteristiku do vyhledávacího pole: Bez využití fixních délek! Vše je založeno rem, což znamená, pokud například zvyšuje font-size kořen, celá vyhledávací pole by mělo odpovídajícím měřítku. Chci, aby se zabránilo jakékoli zapojení JS.

Jakékoli návrhy jsou velmi ocenil!

Položena 07/11/2018 v 23:34
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
0

Vyzkoušet tento kód, jsem odstranil absolutní polohy, přidá flexboxu a pohybuje 400px šířku na mateřské:

* { 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;
}
Odpovězeno 08/11/2018 v 03:01
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more