How can I implement a reset of the entered data within the input itself? For example, add a cross to the right, when clicked, which resets the entered values. I can make a button next to reset, but I do not know how to put a cross inside. I don't need to add an icon, I just need a standard cancel.

3 answers 3

You can use input type="search"

 <input type="search">

Well, if you need through js

 x-field{ display:inline; position:relative; } x-field .close { position:absolute; padding:0 5px; right:0; } 
 <x-field> <input type="text" id = "text"> <span class="close" onclick="this.previousElementSibling.value = ''"> &times; </span> </x-field> 

 var input = document.querySelector('input'); input.addEventListener('click', function(event) { event = event || window.event; if (event.offsetX < 51) { input.value = ''; } }) input.addEventListener('mousemove', function(event) { event = event || window.event; if (event.offsetX < 51) { input.style.cursor = 'pointer'; }else{ input.style.cursor = 'text'; } }) 
 @import "http://fonts.fontstorage.com/import/adventpro.css"; * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background-color: #065b79; overflow: auto; } input { position: absolute; top: 100px; left: 100px; height: 50px; width: 400px; padding-left: 55px; background-color: transparent; background-image: url(http://nouveal.com/wp-content/themes/html5blank-stable-nouveal/img/croix@2x.png); background-repeat: no-repeat; outline: none; color: #fff; text-align: left; font-size: 35px; font-family: 'Advent'; border: 0; border-bottom: .1px solid #fff; } input::placeholder { color: #fff; text-align: center; } 
 <input type="text" placeholder="FiFa">

    You can try to set the parent to a position different from static , for example, position:relative , and to the position:absolute button and with the help of left , right , top , bottom place it where necessary.

    Look here