How to add emoji picker to chatbox?

Question

Is it possible to just select/click a emoji from my list and it will appear in the text field right. I tried a lot of things but all seems to do work. Is it possible to code it with pure CSS/HTML and what is the simplest way forward?

 body { background-color: #6B6B6B; background: url(http://wizzfree.com/pix/bg.jpg) fixed; background-size: 100% 100%; background-repeat: no-repeat; font-family: Arial; color: darkgrey; font-size: 14px; line-height: .3; letter-spacing: .5px; margin: 50px; } /*............... emojis ...............*/ .emojis { position: absolute; padding: 25px 15px 10px 20px; border-radius: 20px 0px 20px 20px; background-color: rgba(0, 0, 0, .3); } .emojis2>img { position: absolute; left: 100%; top: 0; } .smiley { position: absolute; top: 25px; left: 430px; } /*... input message ...*/ input[type=text] { width: 300px; height: 50px; border: none; outline: none; padding-left: 37px; font-family: Arial; color: white; font-size: 16px; font-weight: bold; letter-spacing: 1.5px; background-color: rgba(0, 0, 0, .3); }

 <!-- emojis button --> <div class="smiley" style="height:42px;display:flex;"> <a href="emojis.html"><img src="http://wizzfree.com/pix/smiley2.png" width="40"></a> <!-- input message --> <form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form> </div> <!-- emojis picker --> <div class="emojis" style="letter-spacing:3px;font-size:20px;"> <div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="30" style="transform:scaleX(-1);"></div> <br>😃😁😅🤣😉😊😇😲😳😥 <p> <br>🥰😍😘😜🤫🤤😈😻🙈🙊 <p> <br>💘💕💞💌💑 💐🌹🎀🍨🍭 <p> <br>💃🏄🛀🏩👑🦁🦄 🎠🧸💍 </div>

Answer 1

As above comment suggested, below is a JavaScript example base on your code:

 function injectEmojisToList(e) { document.getElementById("fname").value = e.innerHTML; }

 <style> body { background-color: #6B6B6B; background: url(http://wizzfree.com/pix/bg.jpg) fixed; background-size: 100% 100%; background-repeat: no-repeat; font-family: Arial; color: darkgrey; font-size: 14px; line-height: .3; letter-spacing: .5px; margin: 50px; } /*............... emojis ...............*/ .emojis { position: absolute; padding: 25px 15px 10px 20px; border-radius: 20px 0px 20px 20px; background-color: rgba(0, 0, 0, .3); } .emojis2>img { position: absolute; left: 100%; top: 0; } .smiley { position: absolute; top: 25px; left: 430px; } /*... input message ...*/ input[type=text] { width: 300px; height: 50px; border: none; outline: none; padding-left: 37px; font-family: Arial; color: white; font-size: 16px; font-weight: bold; letter-spacing: 1.5px; background-color: rgba(0, 0, 0, .3); } </style>

 <body> <!-- emojis button --> <div class="smiley" style="height:42px;display:flex;"><a href="emojis.html"><img src="http://wizzfree.com/pix/smiley2.png" width="40"></a> <!-- input message --> <form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form> </div> <!-- emojis list --> <div class="emojis" style="font-size:20px;"> <div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"> </div> <br> <span onclick="injectEmojisToList(this)">😃</span> <span onclick="injectEmojisToList(this)">😁</span> <span onclick="injectEmojisToList(this)">😅</span> <span onclick="injectEmojisToList(this)">🤣</span> <span onclick="injectEmojisToList(this)">😉</span> <span onclick="injectEmojisToList(this)">😊</span> <span onclick="injectEmojisToList(this)">😇</span> <span onclick="injectEmojisToList(this)">😲</span> <span onclick="injectEmojisToList(this)">😳</span> <span onclick="injectEmojisToList(this)">😥</span> <p> <br> <span onclick="injectEmojisToList(this)">🥰</span> <span onclick="injectEmojisToList(this)">😍</span> <span onclick="injectEmojisToList(this)">😘</span> <span onclick="injectEmojisToList(this)">😜</span> <span onclick="injectEmojisToList(this)">🤫</span> <span onclick="injectEmojisToList(this)">🤤</span> <span onclick="injectEmojisToList(this)">😈</span> <span onclick="injectEmojisToList(this)">😻</span> <span onclick="injectEmojisToList(this)">🙈</span> <span onclick="injectEmojisToList(this)">🙊</span> <p> <br> <span onclick="injectEmojisToList(this)">💘</span> <span onclick="injectEmojisToList(this)">💕</span> <span onclick="injectEmojisToList(this)">💞</span> <span onclick="injectEmojisToList(this)">💌</span> <span onclick="injectEmojisToList(this)">💑</span> <span onclick="injectEmojisToList(this)">💐</span> <span onclick="injectEmojisToList(this)">🌹</span> <span onclick="injectEmojisToList(this)">🎀</span> <span onclick="injectEmojisToList(this)">🍨</span> <span onclick="injectEmojisToList(this)">🍭</span> <p> <br> <span onclick="injectEmojisToList(this)">💃</span> <span onclick="injectEmojisToList(this)">🏄</span> <span onclick="injectEmojisToList(this)">🛀</span> <span onclick="injectEmojisToList(this)">🏩</span> <span onclick="injectEmojisToList(this)">👑</span> <span onclick="injectEmojisToList(this)">🦁</span> <span onclick="injectEmojisToList(this)">🦄</span> <span onclick="injectEmojisToList(this)">🎠</span> <span onclick="injectEmojisToList(this)">🧸</span> <span onclick="injectEmojisToList(this)">💍</span> </div> </body>

Some reference:

Smiley Emojis For Web - https://www.w3schools.com/charsets/ref_emoji_smileys.asp

Printing emojis with JavaScript and HTML

What's "this" in JavaScript onclick?