HTML:
<div id="suchbox1">
<div id="helfer">
<input id="suchetext1" maxlength="3" type="text">
</div>
<script>
inhal=document.getElementById('suchetext1');
inhal.addEventListener('keyup',function(){
if(inhal.value.length>=1){
inhal.style.background='white';
} else{
inhal.style.background='none';
}
})
</script>
</body>
CSS:
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
}
#suchetext::placeholder{
color:red;
background:rgba(0,0,0,0.4);
text-align:center;
}
/*
#suchetext1:focus{
background:white;
}
*/
#suchetext:focus::placeholder{
color:green;
background:rgba(0,0,255,0.0);
text-align:left;
font-size:12px;
}
#suchbox,#suchbox1{
display:flex;
min-width:150px;
width:80vw;
max-width:650px;
background:rgba(255,255,255,1);
border-radius:10px;
padding:10px 30px;
border:1px solid white;
justify-content:center;
margin:auto;
margin-top:20px;
}
#suchetext,#helfer{
background-image:url(https://finanz-check21.de/wp-c…ersicherungsvergleich.png);
background-size:calc(100% + 22px) calc(100% + 14px);
background-repeat:no-repeat;
background-position:-11px -7px;
height:35px;
width:49%;
max-width:300px;
min-width:150px;
border:4px solid black;
border-radius:5px;
outline:none;
font-size:33px;
color:red;
font-weight:900;
/*
background-color:rgba(0,0,0,0.3);
background-blend-mode: color;
*/
}
#suchetext:focus{
background-image:url(https://finanz-check21.de/wp-c…ersicherungsvergleich.png), rgba(0,0,0,1);
background-size:calc(50% + 22px) calc(50% + 14px);
background-position:calc(50% - 11px) calc(200% - 7px);
}
#suchetext1{
padding:0;
width:20%;
height:27px;
background:none;
font-size:27px;
outline:none;
font-weight:900;
margin:2px 0 0 9%;
}
#helfer{
display:flex;
}
#butt,#butt1{
border:4px solid black;
border-radius:5px;
font-size:27px;
height:43px;
nin-width:150px;
width:49%;
max-width:300px;
}
@media only screen and (max-width:400px){
#suchbox{
display:flex;
justify-content:center;
flex-direction:column;
}
#suchbox > input{
margin:5px auto;
}
}
