[JS][CSS] setCustomValidity

Guten Morgen, Mittag oder Abend, ich habe eine Frage bezüglich des Befehls setCustomValidity. Ist es möglich die Ausgabe von dem eben genannten Befehl zu gestalten, wenn ja auch mit CSS? Meine zweite sowie dritte Frage impliziert die erste Frage, denn ich würde gerne wissen, ob es möglich sei, dass die Ausgabe nicht auf den Bildschirm fixiert ist, sondern auf die Website bzw. das Element. Und meine letzte Frage ist, ob man die Ausgabe vom Element aus neu positionieren kann, sprich nach links/oben/unten/rechts verschieben. Mit freundlichen Grüßen Crazy

Der hier verwendete Code

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> #sprechblase1{ position: relative; top:0px; left:0px; display:none; } #innen{ display:flex; width:100%; height:100%; line-height:20px; text-align:center; } #aus{ margin-right:20px; position:relative; top:10px; left:10px; width:30px; height:30px; border-radius:5%; background:#fa6405; display:flex; } #sprechblase{ position: relative; top:0px; left:0px; width: 310px; height: 55px; padding: 1px; background: #FFFFFF; border-radius: 6px; border: #000000 solid 2px; box-shadow:3px 3px 5px grey; } #sprechblase:after { content: ''; position: absolute; border-style: solid; border-width: 0 15px 26px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; top: -26px; left: 81px; } #sprechblase:before { content: ''; position: absolute; border-style: solid; border-width: 0 16px 27px; border-color: #000000 transparent; display: block; width: 0; z-index: 0; top: -29px; left: 80px; } </style> <br><br><br><center><input type="text" id='form-name' placeholder='Name' onmouseout="aus()"> </center> <div id="sprechblase1"> <div id="sprechblase"> <div id="innen"> <div id="aus"><img src="https://www.experten-beraten.de/imgs/icons/hqc-s-1.png" width="30" height="30"> </div><p> Bitte füllen sie dieses Feld aus </p></div> </div> <script> $('input').click(function(){ $('#sprechblase1').css('top',event.pageY-20+'px'); $('#sprechblase1').css('left',event.pageX-80+'px'); $('#sprechblase1').css('display','block'); }); function aus(){ $('#sprechblase1').css('display','none'); } </script> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!