Inpage-Search
CODE
×
HTML
<div class='inpage-search'> <input type=text value='' class='search-1' placeholder='In den News suchen …' onKeyPress='return checkSubmit(event)'> <div class='search-icon'></div> </div>
CSS
input[type=text].search-1 { text-overflow:ellipsis; margin-left: 12px; width: calc(100% - 24px) !important; margin-top: 12px !important; margin-bottom: 12px !important; padding-right: 44px !important; background-color: var(--white); height: 42px !important; border:none; opacity: 0.9; padding-left: 15px; } div.search-icon { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; height: 32px; width: 32px; right: 24px; top: 16px; position:absolute; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } @media screen and (max-width: 767px) { input[type=text].search-1 { } }
JS
$('div.inpage-search > input').on('change keydown paste input', function(){ var count = $(this).val().length; if (count>2) { if ($('div.search-icon').hasClass('active')) { } else { $('div.search-icon').addClass('active'); } } else { $('div.search-icon').removeClass('active'); } });
Inpage-Search
Letzte Änderung: 26.08.2021 - 08:58 Uhr
×