8.3K views
CSSAdd prefixes
1.searchbar { 2 font-size: 14px; 3 font-family: arial, sans-serif; 4 color: #202124; 5 display: flex; 6 z-index: 3; 7 height: 44px; 8 background: white; 9 border: 1px solid #dfe1e5; 10 box-shadow: none; 11 border-radius: 24px; 12 margin: 0 auto; 13 width: auto; 14 max-width: 224px; 15} 16 17.searchbar:hover { 18 box-shadow: 0 1px 6px rgb(32 33 36 / 28%); 19 border-color: rgba(223,225,229,0); 20} 21 22.searchbar-wrapper { 23 flex: 1; 24 display: flex; 25 padding: 5px 8px 0 14px; 26} 27 28.searchbar-left { 29 font-size: 14px; 30 font-family: arial, sans-serif; 31 color: #202124; 32 display: flex; 33 align-items: center; 34 padding-right: 13px; 35 margin-top: -5px; 36} 37 38.search-icon-wrapper { 39 margin: auto; 40} 41 42.search-icon { 43 margin-top: 3px; 44 color: #9aa0a6; 45 height: 20px; 46 line-height: 20px; 47 width: 20px; 48} 49 50.searchbar-icon { 51 display: inline-block; 52 fill: currentColor; 53 height: 24px; 54 line-height: 24px; 55 position: relative; 56 width: 24px; 57} 58 59.searchbar-center { 60 display: flex; 61 flex: 1; 62 flex-wrap: wrap; 63} 64 65.searchbar-input-spacer { 66 color: transparent; 67 flex: 100%; 68 white-space: pre; 69 height: 34px; 70 font-size: 16px; 71} 72 73.searchbar-input { 74 background-color: transparent; 75 border: none; 76 margin: 0; 77 padding: 0; 78 color: rgba(0, 0, 0, .87); 79 word-wrap: break-word; 80 outline: none; 81 display: flex; 82 flex: 100%; 83 margin-top: -37px; 84 height: 34px; 85 font-size: 16px; 86 max-width: 100%; 87 width: 100%; 88} 89 90.searchbar-right { 91 display: flex; 92 flex: 0 0 auto; 93 margin-top: -5px; 94 align-items: stretch; 95 flex-direction: row 96} 97 98.searchbar-clear-icon { 99 margin-right: 12px 100} 101 102.voice-search { 103 flex: 1 0 auto; 104 display: flex; 105 cursor: pointer; 106 align-items: center; 107 border: 0; 108 background: transparent; 109 outline: none; 110 padding: 0 8px; 111 width: 2.8em; 112}
HTML
1<div class="searchbar"> 2 <div class="searchbar-wrapper"> 3 <div class="searchbar-left"> 4 <div class="search-icon-wrapper"> 5 <span class="search-icon searchbar-icon"> 6 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 7 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> 8 </path> 9 </svg> 10 </span> 11 </div> 12 </div> 13 14 <div class="searchbar-center"> 15 <div class="searchbar-input-spacer"></div> 16 17 <input type="text" class="searchbar-input" maxlength="2048" name="q" autocapitalize="off" autocomplete="off" title="Search" role="combobox" placeholder="Search Google"> 18 </div> 19 20 <div class="searchbar-right"> 21 <svg class="voice-search" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 22 <path fill="#4285f4" d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"> 23 </path> 24 <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path> 25 <path fill="#fbbc05" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"> 26 </path> 27 <path fill="#ea4335" d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"> 28 </path> 29 </svg> 30 </div> 31 </div> 32</div>