3.7K views
CSSAdd prefixes
1.search { 2 display: flex; 3 align-items: center; 4 justify-content: space-between; 5 text-align: center; 6} 7 8.search__input { 9 font-family: inherit; 10 font-size: inherit; 11 background-color: #f4f2f2; 12 border: none; 13 color: #646464; 14 padding: 0.7rem 1rem; 15 border-radius: 30px; 16 width: 12em; 17 transition: all ease-in-out .5s; 18 margin-right: -2rem; 19} 20 21.search__input:hover, .search__input:focus { 22 box-shadow: 0 0 1em #00000013; 23} 24 25.search__input:focus { 26 outline: none; 27 background-color: #f0eeee; 28} 29 30.search__input::-webkit-input-placeholder { 31 font-weight: 100; 32 color: #ccc; 33} 34 35.search__input:focus + .search__button { 36 background-color: #f0eeee; 37} 38 39.search__button { 40 border: none; 41 background-color: #f4f2f2; 42 margin-top: .1em; 43} 44 45.search__button:hover { 46 cursor: pointer; 47} 48 49.search__icon { 50 height: 1.3em; 51 width: 1.3em; 52 fill: #b4b4b4; 53}
HTML
1<div class="search"> 2 <input type="text" class="search__input" placeholder="Type your text"> 3 <button class="search__button"> 4 <svg class="search__icon" aria-hidden="true" viewBox="0 0 24 24"> 5 <g> 6 <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path> 7 </g> 8 </svg> 9 </button> 10</div>