Search-Area
CODE
×
HTML
<div class='search-area'> <div class='search-input-box'> <input value='' class='search' placeholder='Suche auf Website'> <img class='arrow-right' src='img/go-next.svg'> </div> <div class='search-suggests'> <a class='search-suggest a1'><b>Steuer</b>n</a> <a class='search-suggest'><b>Steuer</b>erklärung</a> <a class='search-suggest a2'><b>Steuer</b>n</a> <a class='search-suggest a3'>Online <b>Steuer</b>erklärung</a> <a class='search-suggest a4'><b>Steuer</b> Ratgeber</a> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.search-area { background-color: rgba(247,233,210,1); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-left: 30px; margin-right: 30px; padding-top: 10px; padding-bottom: 11px; padding-left: 11px; padding-right: 11px; margin-top: 0px; margin-bottom: 20px; } } @media screen and (max-width: 767px) { div.search-area { margin-left: 20px; margin-right: 20px; } } @media screen and (max-width: 1119px) { div.search-input-box { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } } @media screen and (max-width: 767px) { div.search-input-box { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } } input.search { color: var(--black); border:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; letter-spacing: 0.01rem; word-spacing: 0.025rem; position:relative; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: 20px center; background-size: 39px 39px; background-color:transparent; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 5px; padding-right: 35px; padding-bottom: 5px; padding-left: 70px; width: 100%; max-width: none; height: 65px; } img.arrow-right { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; width: 32px; height: 24px; } a.search-suggest { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: var(--black); text-decoration:none; letter-spacing: 0.02rem; word-spacing: 0.05rem; display:block; padding-top: 10px; padding-right: 70px; padding-bottom: 10px; padding-left: 70px; width: 100%; } div.search-input-box > img.arrow-right { display: none; position: absolute; top: calc(50% - 12px); right: 24px; } img.arrow-right:hover, img.arrow-right:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.search-suggest:hover, a.search-suggest:focus { background-color: rgba(247,233,210,1); } @media screen and (max-width: 767px) { input.search { font-size: 21px; line-height: 25px; background-position: calc(100% - 7px) center; background-size: 36px 36px; padding-right: 50px; padding-left: 12px; height: 42px; } a.search-suggest { font-size: 21px; line-height: 25px; padding-right: 10px; padding-left: 10px; } div.search-input-box > img.arrow-right { margin-right: -12px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Search-Area
×
Steuer
n
Steuer
erklärung
Steuer
n
Online
Steuer
erklärung
Steuer
Ratgeber