add clear button to text input
<input type="search" placeholder="Search..."/>
<style>
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
input[type=search] {
-webkit-appearance: none;
}
</style>
4
5
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>
Thank you!
5
4
(5 Votes)
0
Are there any code examples left?
New code examples in category Html
Relative searches
keyboard button to clear input box
button to clear input box
how to clear all text fields with one button
clear button input javascript
input with clear button css
InputDecorator clear button
input field with clear button
close button for an input element to clear text
adding a clear input button html css
how to create html form clear text button
button clear text html
css add clear button to input
javascript add clear button to input
have a button to clear textboxfor
button to cleare a text box
input type text with clear button
clear button inside text box
buefy input clear button
clear button in text input
input add clear button
input text box add clear button
how to get clear button input
how to get that clear button input
input clear input button
how to clear text input form
input text hide clear button
button clear input
how to reset the form textbox value in html with clearbutton
how to input determined and clear button
button clear input in an
html add clear to input text
form button clear fields
How do I put a clear button inside my HTML text input box
add clear button to textinput
clear input html button
css input text clear button
clear input field with a button
clear button inside input field
textbox with clear button
html clear inputs on button clic
button to clear all inputs ina faorm
how to clear input field on button click
clear input field on button press
clear text of input field on button press
html button to clear input field
html button to clear input
interacting with an input clear button
html input text on button click clear value
input field clear button
clear input box after button click
WebKit HTML5 clear button in the input field
clear text field input
how to style button clear inside an input
clean button input html
input type x button to clear content
Input clear button CSS
clear input buttion
clear input field html button
html input clear button in input
clear button on input
HOW TO CLEAR THE FIELDS IN A HTML FORM USING CLEAR BUTTON
html how to create a clear button that sets all inputs to empty
css input with clear button
on click of button clear input field
html form input clear button
how to clear input field after button
input type data clear button
clear button for input field qjuery
how to clear input type html button
input button clear
clear input with button click
input clear button ux
when we click on add button i want input box clear in javascript
edit clear button properties in text field
clear button in input field html
clear input with button
place corss inside in textbox to clear text
clear search field html
button type reset
how to put cancel sign in an input?
clear input field on button click
javascript button clear input
have close button inside input text
span with cross to clear
add a clear button to input
html my button clean the input
button to clear input field
add button to clear input
textfield clear button
when write in input field delete buttuon show
input clear button
create cancel button in inputbox css
html input search clear button
add a cross button to empty an input field
html clearable input
button onclick clear text field
clear input button
how to create a button at the end of an input box with jquery
