Breaking News: Grepper is joining You.com. Read the official announcement!

add clear button to text input

answered on December 1, 2020 Popularity 10/10 Helpfulness 2/10

answer add clear button to text input

related add clear button to text input

add clear button to text input

Comment

<!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>

Popularity 10/10 Helpfulness 2/10 Language html

Source: stackoverflow.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Dec 01 2020

0 Answers Avg Quality 2/10

Closely Related Answers

add clear button to text input

Comment

<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>

Popularity 10/10 Helpfulness 4/10 Language html

Source: stackoverflow.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Dec 01 2020

0 Answers Avg Quality 2/10

add clear button to text input

Contents

More Related Answers

add clear button to text input

Closely Related Answers

add clear button to text input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.