Hallo zusammen,
ich will für meine Webseite ein Eingabefeld programmieren, das in einem Bild fixiert ist. (Beispielbild im Anhang)
Das Eingabefeld habe ich bereits programmiert, das Kennzeichen ist als Bild gespeichert. In der Tablets und Smartphone Ansicht verschiebt sich jedoch das Eingabefeld.
Deshalb würde ich gerne das Eingabefeld in das Bild integrieren, aber auch so das man es benutzen kann.
Wie kann ich das Eingabefeld in dem Bild fixieren, sodass es sich nicht mehr verschiebt?
Ich bearbeite meine Webseite mit WordPress bzw. mit dem Plugin Elementor.
Danke im Voraus für alle hilfreichen Antworten.
Es grüßt Tony
<img class="vorschau" src="image/kenzeichen.png" alt="bild">
Code
<style>
*{
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;
box-shadow:10px 10px 10px black;
margin-top:20px;
}
#suchetext,#helfer{
background-image:url(/image/eurokennzeichen-eu.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(/image/eurokennzeichen-eu.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;
}
}
</style>
<body>
<div id="suchbox">
<input id="suchetext" type="text" placeholder="Suche...">
<input type="button" id="butt" value="Suchen" >
</div>
<div id="suchbox1">
<div id="helfer">
<input id="suchetext1" maxlength="3" type="text">
</div>
<input type="button" id="butt1" value="Suchen" >
</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>