;fill-opacity:1;'/%3e%3c/svg%3e){kind=small}
;fill-opacity:1;'/%3e%3c/svg%3e){kind=small}
;fill-opacity:1;'/%3e%3cpath%20d='M6.25%202.91667C6.25%201.99619%206.99619%201.25%207.91667%201.25C8.83714%201.25%209.58333%201.99619%209.58333%202.91667V3.75C9.58333%204.21024%209.21024%204.58333%208.75%204.58333H7.91667C6.99619%204.58333%206.25%203.83714%206.25%202.91667Z'%20fill='%239F9F9F'%20style='fill:%239F9F9F;fill:color(display-p3%200.6235%200.6235%200.6235);fill-opacity:1;'/%3e%3crect%20x='18.75'%20y='14.5833'%20width='8.33333'%20height='4.16667'%20rx='2.08333'%20transform='rotate(180%2018.75%2014.5833)'%20fill='%239F9F9F'%20style='fill:%239F9F9F;fill:color(display-p3%200.6235%200.6235%200.6235);fill-opacity:1;'/%3e%3cpath%20d='M13.75%2017.0833C13.75%2018.0038%2013.0038%2018.75%2012.0833%2018.75C11.1629%2018.75%2010.4167%2018.0038%2010.4167%2017.0833L10.4167%2016.25C10.4167%2015.7898%2010.7898%2015.4167%2011.25%2015.4167L12.0833%2015.4167C13.0038%2015.4167%2013.75%2016.1629%2013.75%2017.0833Z'%20fill='%239F9F9F'%20style='fill:%239F9F9F;fill:color(display-p3%200.6235%200.6235%200.6235);fill-opacity:1;'/%3e%3crect%20x='5.41675'%20y='18.75'%20width='8.33333'%20height='4.16667'%20rx='2.08333'%20transform='rotate(-90%205.41675%2018.75)'%20fill='white'%20style='fill:white;fill-opacity:1;'/%3e%3cpath%20d='M2.08301%2012.083C2.08318%2011.6229%202.45686%2011.25%202.91699%2011.25L3.75%2011.25L3.75%2012.083C3.75%2012.5431%203.37708%2012.9168%202.91699%2012.917C2.45675%2012.917%202.08301%2012.5432%202.08301%2012.083Z'%20fill='white'%20stroke='white'%20style='fill:white;fill-opacity:1;stroke:white;stroke-opacity:1;'%20stroke-width='1.66667'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3crect%20x='14.5833'%20y='1.25'%20width='8.33333'%20height='4.16667'%20rx='2.08333'%20transform='rotate(90%2014.5833%201.25)'%20fill='white'%20style='fill:white;fill-opacity:1;'/%3e%3cpath%20d='M17.917%207.91699C17.9168%208.37708%2017.5431%208.75%2017.083%208.75L16.25%208.75L16.25%207.91699C16.25%207.45686%2016.6229%207.08318%2017.083%207.08301C17.5432%207.08301%2017.917%207.45675%2017.917%207.91699Z'%20fill='white'%20stroke='white'%20style='fill:white;fill-opacity:1;stroke:white;stroke-opacity:1;'%20stroke-width='1.66667'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e){kind=small}
;fill-opacity:1;'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M6.87147%203.23818L6.50008%204.16666H4.16675C2.78604%204.16666%201.66675%205.28594%201.66675%206.66666V8.33332C1.66675%209.71404%202.78604%2010.8333%204.16675%2010.8333H6.66675C6.66675%209.45261%207.78604%208.33332%209.16675%208.33332H10.8334C12.2141%208.33332%2013.3334%209.45261%2013.3334%2010.8333H15.8334C17.2141%2010.8333%2018.3334%209.71404%2018.3334%208.33332V6.66666C18.3334%205.28594%2017.2141%204.16666%2015.8334%204.16666H13.5001L13.1287%203.23818C12.749%202.28903%2011.8298%201.66666%2010.8075%201.66666H9.19266C8.1704%201.66666%207.25113%202.28903%206.87147%203.23818ZM10.8075%203.33332H9.19266C8.85191%203.33332%208.54549%203.54078%208.41893%203.85717L8.29514%204.16666H11.705L11.5812%203.85716C11.4547%203.54078%2011.1483%203.33332%2010.8075%203.33332Z'%20fill='%239F9F9F'%20style='fill:%239F9F9F;fill:color(display-p3%200.6235%200.6235%200.6235);fill-opacity:1;'/%3e%3c/svg%3e){kind=small}
;fill-opacity:1;'/%3e%3cpath%20d='M14.3539%2019.1209L14.6281%2012.7657L10.5143%2013.3142L6.94897%2014.3545L7.22323%2017.428L9.41728%2020.4449L11.8856%2020.1706L14.3539%2019.1209Z'%20fill='%230F0F0F'%20style='fill:%230F0F0F;fill:color(display-p3%200.0588%200.0588%200.0588);fill-opacity:1;'/%3e%3cpath%20d='M17.9193%2016.331L19.2906%2019.3478H22.3074L24.5014%2019.0735L25.5984%2015.2339L25.8727%2011.9429L21.2103%2012.2171L17.645%2013.2574L17.9193%2016.331Z'%20fill='%230F0F0F'%20style='fill:%230F0F0F;fill:color(display-p3%200.0588%200.0588%200.0588);fill-opacity:1;'/%3e%3cpath%20d='M27.7384%2011.3591C27.5295%2011.1314%2018.9375%2010.4833%2017.9921%2011.8144C17.5475%2012.4411%2017.1859%2013.3571%2016.3798%2013.4642C15.5736%2013.5686%2015.1692%2011.8867%2014.1354%2011.6403C13.0989%2011.3939%204.35159%2013.6731%204.10519%2014.2355C3.85879%2014.7953%204.08644%2016.1291%204.36499%2016.3032C4.64085%2016.4799%205.6827%2015.8827%205.93178%2016.0702C6.17818%2016.2576%208.22707%2020.6339%208.66631%2021.0035C9.10555%2021.3732%2014.0657%2020.7571%2014.4862%2020.1626C14.9067%2019.5653%2015.5736%2015.8853%2015.7852%2015.497C15.9968%2015.1113%2016.8726%2014.7953%2017.1886%2015.3577C17.5046%2015.9175%2018.0296%2019.5225%2018.6081%2019.8894C19.1866%2020.2563%2024.2539%2020.3527%2024.9717%2019.7046C25.6922%2019.0564%2026.6001%2013.9302%2026.809%2013.649C27.0206%2013.3678%2027.8294%2013.3571%2027.9526%2013.0758C28.0731%2012.7973%2027.9499%2011.5867%2027.7384%2011.3591ZM13.8434%2019.0993C13.5274%2019.6778%2010.1608%2020.3367%209.47783%2020.0715C8.79487%2019.809%206.7433%2015.6791%207.13701%2014.8114C7.53072%2013.9436%2013.6854%2012.6018%2014.2639%2013.1026C14.8451%2013.6035%2014.1595%2018.5208%2013.8434%2019.0993ZM24.2968%2018.9975C24.112%2019.1823%2019.8401%2019.3377%2019.3928%2018.9681C18.9456%2018.5985%2018.2626%2013.3865%2018.734%2012.9955C19.208%2012.6045%2025.1779%2012.4384%2025.5716%2012.9955C25.968%2013.5499%2024.4816%2018.8127%2024.2968%2018.9975Z'%20fill='%23F3EA37'%20style='fill:%23F3EA37;fill:color(display-p3%200.9529%200.9176%200.2157);fill-opacity:1;'/%3e%3c/svg%3e)
;fill-opacity:1;'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.24902%203.19995C7.71798%203.19995%208.09815%203.58012%208.09815%204.04907V7.94296L9.97225%209.81707C10.3039%2010.1487%2010.3039%2010.6863%209.97225%2011.0179C9.64065%2011.3495%209.10301%2011.3495%208.77141%2011.0179L6.89731%209.1438C6.57882%208.82532%206.3999%208.39337%206.3999%207.94296V4.04907C6.3999%203.58012%206.78007%203.19995%207.24902%203.19995Z'%20fill='black'%20style='fill:black;fill-opacity:1;'/%3e%3c/svg%3e)
;fill-opacity:1;'/%3e%3c/svg%3e)
Ihr möchtet gerne ein Suchfeld hinter einem Icon verstecken? Heute zeige ich euch wie ihr das ganze einfach mit CSS erstellen könnt.
https://www.chefblogger.me/2025/11/10/wie-erstelle-ich-ein-dynamisches-suchfeld-mit-css/
Inhaltsverzeichnis
00:00 - Einleitung 00:28 - HTML 03:05 - CSS 13:48 - Abschluss
;fill-opacity:1;'/%3e%3cpath%20d='M98.1234%2020.65H109.874C110.623%2020.65%20111.107%2020.5333%20111.326%2020.3C111.544%2020.0667%20111.653%2019.7944%20111.653%2019.4833V18.4333C111.653%2018.1222%20111.544%2017.863%20111.326%2017.6556C111.107%2017.4222%20110.623%2017.3056%20109.874%2017.3056H101.916C101.323%2017.3056%20100.886%2017.2019%20100.605%2016.9944C100.355%2016.7611%20100.23%2016.3981%20100.23%2015.9056V11.7444C100.23%2011.2519%20100.355%2010.9019%20100.605%2010.6944C100.886%2010.4611%20101.323%2010.3444%20101.916%2010.3444H106.831C107.58%2010.3444%20108.064%2010.2278%20108.283%209.99444C108.501%209.76111%20108.61%209.48889%20108.61%209.17778V8.59444C108.61%208.28333%20108.501%208.01111%20108.283%207.77778C108.064%207.54444%20107.58%207.42778%20106.831%207.42778H98.1234C97.5304%207.42778%2097.0934%207.32407%2096.8125%207.11667C96.5628%206.88333%2096.438%206.52037%2096.438%206.02778V1.4C96.438%200.907408%2096.438%200%2096.438%200H111.185C113.776%200%20115.695%200.505555%20116.944%201.51667C118.223%202.50185%20118.863%203.85%20118.863%205.56111V7.81667C118.863%208.80185%20118.66%209.65741%20118.255%2010.3833C117.849%2011.1093%20117.131%2011.6537%20116.101%2012.0167C118.317%2012.2241%20119.846%2012.7944%20120.689%2013.7278C121.563%2014.6352%20122%2015.9444%20122%2017.6556V21.5444C122%2023.5407%20121.235%2025.1222%20119.706%2026.2889C118.177%2027.4296%20115.914%2028%20112.917%2028H96.438V27.4167C96.438%2027.4167%2096.438%2027.0926%2096.438%2026.6V22.05C96.438%2021.5574%2096.5628%2021.2074%2096.8125%2021C97.0934%2020.7667%2097.5304%2020.65%2098.1234%2020.65Z'%20fill='%23F3EA37'%20style='fill:%23F3EA37;fill:color(display-p3%200.9531%200.9164%200.2174);fill-opacity:1;'/%3e%3cpath%20d='M30.2095%2019.8408C31.7397%2023.5194%2034.671%2026.4633%2038.3345%2028H30.2095V19.8408ZM58.0952%2028H49.9702C53.6337%2026.4633%2056.565%2023.5194%2058.0952%2019.8408V28ZM38.3345%200C34.6712%201.53657%2031.7398%204.47998%2030.2095%208.1582V0H38.3345ZM58.0952%208.1582C56.5649%204.48%2053.6334%201.53659%2049.9702%200H58.0952V8.1582Z'%20fill='white'%20style='fill:white;fill-opacity:1;'/%3e%3c/svg%3e){kind=small}
